Upgrade an element to a custom element

Question

I'm trying to upgrade a normal element to a custom element. This example does not work so maybe this is not possible?

customElements.define('html-h1-heading-element', class extends HTMLHeadingElement {
  constructor() {
    super();
  }
  connectedCallback() {
    console.log('Hello from custom element');
  }
}, {
  extends: 'h1'
});

const el = document.querySelector('h1');
el.setAttribute('is', 'html-h1-heading-element');
console.log(el);

<h1>Hello, world</h1>

Answer 1

There are 3 types of Elements:

• Standard Elements

• Autonomous Custom Elements AE (extend from HTMLElement)

• Customized Built-In Elements CBIE (extend from Standard Elements)
  The is attribute is not your regular Element Attribute.
  You can't change/setAttribute("is",...) a Element to something else after definition.
  The is attribute is used when the element is created by the DOM parser, not on DOM mutations.

Customized Elements are not supported in Safari, and Apple has stated they never will be.

source: https://github.com/WICG/webcomponents/issues/509

You can try a Polyfill,
or just not use them, and stick to Autonomous Elements (extend HTMLElement).

Note that all Baseclasses out there, Lit, Hybrids, Stencil etc, all extend from HTMLElement,
they don't do Customized Built-In Elements

If you continue with Customized Elements (not working on Safari) note that:

document.body.append(
  document.createElement("IMG", { is: "white-queen" })
);

properly creates a Customized Built-In DOM element,
but it does not set the is attribute on the DOM element.
So if you need it as CSS selector you have to explicitly set it yourself.

document.body.appendChild(
  document.createElement("IMG", { is: "white-queen" })
).setAttribute("is", "white-queen");

This then allows the CSS selector [is=*"white"] to select all white pieces. Which is not possible with partial tag names.

All my experiments in: https://chessmeister.github.io/

I have never used Customized Built-In Elements since.