Custom Elements Built-in Style-ability

[WebReflection]

CodePen Live Example

Issue

It is possible to define custom-elements built-in but there is an inconsistent behavior regarding these:

• if the node is already live, with its own is attribute, styles that target such attribute are applied
• if a custom element is registered, and its class is used to create a new instance, the is attribute is not automatically set
• if a custom element is registered, and a node created via document.createElement(tag, {is: ceName}) is appended, the is attribute is not automatically set

In both latter cases the is attribute is revealed only after an explicit element.outerHTML or through its parentElement.innerHTML.

This behavior makes styling custom elements cumbersome, unless the constructor doesn't explicitly also set the attribute.

Example

// this makes BlueButton not styled via button[is="blue-button"]
class BlueButton extends HTMLButtonElement {
  constructor() {
    super().textContent = 'is it blue?';
  }
}
customElements.define('blue-button', BlueButton, {extends: 'button'});

// this makes RedButton styled via button[is="red-button"]
class RedButton extends HTMLButtonElement {
  constructor() {
    super()
    this.textContent = 'is it red?';
    this.setAttribute('is', 'red-button');
  }
}
customElements.define('red-button', RedButton, {extends: 'button'});

// test
document.head.appendChild(
  document.createElement('style')
).textContent = `
  button[is="blue-button"] { color: blue; }
  button[is="red-button"] { color: red; }
`;
document.body.append(new BlueButton, new RedButton);
// note only the red button is red

As summary

While it's trivial enough to tell every developer that the constructor must explicitly set the is attribute, this looks like a bug in the current specs, as already live elements gets upgraded without such need, but elements created via class or document can't be styled as expected.

Thanks for eventually fixing this.