Webkit et les Custom Elements

intro

Des éléments personnalisés autonomes :

class MyAutonomousElement extends HTMLElement {
    constructor () {
        super();
        const shadow = this.attachShadow({mode: 'open'});
        shadow.textContent = 'This is a autonomous custom element';
    }
}
window.customElements.define(
    'my-autonomous-element', 
    MyAutonomousElement
);
<my-autonomous-element></my-autonomous-element>

On peut aussi créer des éléments personnalisés en étendant ceux qui existent déjà :

class MyCustomizedBuiltinElement extends HTMLParagraphElement {
    constructor () {
        super();
        this.textContent = 'This is a Customized built-in elements'
    }
}

window.customElements.define(
    'my-customized-built-in-element', 
    MyCustomizedBuiltinElement, 
    {extends: 'p'}
);
<p is="my-customized-built-in-element"></p>

Les deux manières de faire sont supportées par Firefox (octobre 2018), Chrome (mai 2018), Edge (janvier 2020). Seule la première est supportée par les navigateurs à moteur de rendu webkit comme Safari et Epiphany (Gnome Web) sous Linux.