Create a new html element in css

Question

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?

This is same as html & CSS use with className and here same is applied but with a custom tag — Yupma
– Yupma, Commented Oct 12, 2021 at 12:41
Looks like the developer did not upload all his source code, a custom element can only be created with javascript — Danny '365CSI' Engelman
– Danny '365CSI' Engelman, Commented Oct 14, 2021 at 6:36
@Danny'365CSI'Engelman that sounds wrong since the package is installed from the code you see in github and all you need to make this element work is add the css file — Valu3
– Valu3, Commented Oct 14, 2021 at 6:46
You are right. run customElements.get("status-indicator") and you will get undefined. <status-indicator> isn't a Custom Element at all (yet). But it is perfectly fine to assign CSS to these elements; that is all the author does. — Danny '365CSI' Engelman
– Danny '365CSI' Engelman, Commented Oct 14, 2021 at 8:17

Adam Katz · Accepted Answer · 2021-10-12 16:22:27Z

3

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).

answered Oct 12, 2021 at 16:22

Adam Katz

16.2k5 gold badges79 silver badges94 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Valu3 Over a year ago

I knew about custom elements but had no idea one can be defined from CSS - which part refers to this in the spec?

Adam Katz Over a year ago

I'm not sure what you mean by "defined" in this capacity. CSS defines behavior of elements regardless of whether they're in the HTML spec. When tinkering with a site in my browser's dev console, I often disable CSS by simply adding no as a parent element for some CSS declaration to disable it. There's nothing invalid about that.

Valu3 Over a year ago

As in there is no JS code to define the element window.customElements.define - only css code

Adam Katz Over a year ago

Correct, as noted in the comments to the question. I don't think JS definition is necessary unless you've got some JS treatment that is complaining about that lack of a definition.

Collectives™ on Stack Overflow

Create a new html element in css

1 Answer 1

4 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Related