OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

Adding ES6 custom Html element to youtube

  • Thread starter Thread starter Goran Usljebrka
  • Start date Start date
G

Goran Usljebrka

Guest
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/2...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.

Code:
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.

<p>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.</p>
<p>When I inject it into youtube page, it fails because of their compatibility script.
<a href="https://www.youtube.com/s/desktop/2...adapter.vflset/custom-elements-es5-adapter.js" rel="nofollow noreferrer">https://www.youtube.com/s/desktop/2...adapter.vflset/custom-elements-es5-adapter.js</a></p>
<blockquote>
<p>Error: Constructing custom-element: TypeError: Class constructor CustomElement cannot be invoked without 'new'</p>
</blockquote>
<p><strong>Here's basic es6 custom html element.</strong></p>
<pre><code>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);

</code></pre>
<p>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.</p>
<p>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.</p>
<p>I've also tried looking into a webpack + babel way of converting this into es5 but either I didn<code>t do it right, or it can</code>t do what it takes for youtube. Not sure really.</p>
 

Online statistics

Members online
0
Guests online
4
Total visitors
4
Top