jQuery and extending built-in elements

Question

I am just looking into extending built-in elements for the first time and have some basic questions.

Let's say I want to extend a p element, assign it a class, and make it contenteditable. Is the following correct and ready-to-use?

      customElements.define('p-edit', pedit, { extends: 'p' });

      class pedit extends HTMLParagraphElement {
        constructor() {
            
            super();
          
            this.classList.add("foo");
            this.setAttribute("contenteditable",true);
        
        }
    }

And would that pedit element be a valid jQuery selector? And would it be a match if the jQuery selector were 'p[contenteditable="true"]' ?

Sure, setting the contenteditable attribute in the constructor is a fine way to do it. And yes, your selector would work. Though you should first define the class before calling customElements.define. Be aware that Customizing built-in elements are not supported in Safari. — Emiel Zuurbier
This looks correct. Here is a working CodePen -- Notice there is no jQuery loaded ;) — Louys Patrice Bessette
Thanks to you both. If we have a tabindex attribute in the pedit custom element, how would the tabindex be passed to the constructor when instantiating the element in javascript : document.createElement('pedit', {is: "pedit"}) — Tim
About the jQuery selector, what about $("p.foo") ? Another codepen — Louys Patrice Bessette
About tabIndex attributes, I guess you will have to loop each elements to set them correctly. — Louys Patrice Bessette

Danny '365CSI' Engelman Danny '365CSI' Engelman · Accepted Answer · 2022-02-11T10:46:22

Ditch Customized Built-In Elements and stick to Autonomous Elements extends HTMLElement.

Unless you want to rely on polyfills forever.

Apple has, since 2016, stated they never will implement Customized Built-In Elements in Safari.

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

jQuery and extending built-in elements

1 Answers