This is an ES6, custom html element. You can use inspector to add it into any page and it should work. It just registers new element, instantiates it and adds it into the DOM.

When I inject it into youtube page, it fails because of their compatibility script.
https://www.youtube.com/s/desktop/252a8b44/jsbin/custom-elements-es5-adapter.vflset/custom-elements-es5-adapter.js

“Error: Constructing custom-element: TypeError: Class constructor CustomElement cannot be invoked without ‘new'”

Here’s basic es6 custom html element.

class CustomElement extends HTMLElement {
    static get observedAttributes() {
        return ["task"];
    }
    constructor() {
        super();
        this._internals = this.attachInternals();
        this.rootElement;
    }
    attributeChangedCallback(name, oldValue, newValue) {}
    connectedCallback() {
        this.setup();
        this.setState("ready");
    }
    disconnectedCallback() {
        //this.cleanup();
    }
    setup() {
        const shadow = this.attachShadow({ mode: "open" });
        this.rootElement = document.createElement("div");
        this.rootElement.id = "custom-element";

        shadow.appendChild(this.rootElement);
    }
    isReady() {
        return this._internals.states.has("ready") ? true : false;
    }
    setState(state) {
        const states = ["ready"];
        for (const s of states) {
            this._internals.states.delete(s);
            this.rootElement.classList.remove(s);
        }
        this.rootElement.classList.add(state);
        this._internals.states.add(state);
    }
}

customElements.define("custom-element", CustomElement);

let customElementOb = document.createElement("custom-element");
document.body.appendChild(customElementOb);

I’ve invested a lot of time on this element (the code I provided is an example) so if someone can suggest me of a way to use it on websites that have es5 shims, I would be grateful.

I’ve been writing an adapter that would be a bridge between what youtube expects and the class, but I didn`t get far yet.

I’ve also tried looking into a webpack + babel way of converting this into es5 but either I didnt do it right, or it cant do what it takes for youtube. Not sure really.

Thanks for reading!