Create a new html element in css

user_14293187 0
Viewed 103

I stumbled upon a package that has no js or html, only css and it defines a custom element which can be used in html:

<status-indicator active pulse></status-indicator>

The only declaration I see for this is in the css file:

status-indicator {
  display: inline-block;
  border-radius: 50%;
  cursor: pointer;
  width: var(--status-indicator-size);
  height: var(--status-indicator-size);
  background-color: var(--status-indicator-color);
}

This is the package: https://www.npmjs.com/package/status-indicator

For the sake of learning - could anyone explain how and why this works or where should I refer to read about it?

css
1 Answers

HTML allows custom elements and there are some DOM hooks to interface with them. The recommendation is to use a hyphen in the tag name so it does not overlap with future HTML tags.

As you can see from the CSS declaration, nothing is taken for granted. The display behavior is explicitly defined (the default is to treat an unknown element as inline text, just like <span>). It also uses CSS custom properties (variables).

user_5193600
Related