0
110
VistasUpgrade an element to a custom element
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>1 Respuestas
Responde la pregunta0
There are 3 types of Elements:
Standard Elements
Autonomous Custom Elements (extend from HTMLElement)
Customized Built-In Elements (extend from Standard Elements)
Theisattribute is not your regular Element Attribute.
You can't change/setAttribute("is",...) a Element to something else after definition.
Theisattribute 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.