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

Is it possible to create a Web Component that can extend any element?

  • Thread starter Thread starter Chris_F
  • Start date Start date
C

Chris_F

Guest
I want to create a custom element class that can be use on basically any type of element if is="foo-element" is present, but I get the feeling that it's not possible.

The closest I have been able to come up with is this abomination.

Code:
const allTags = ["ul", "div" /* etc... */]
for (const tag of allTags) {
    const baseCalss = document.createElement(tag).constructor
    const customElement = class extends baseCalss {
        constructor() { super() }
    }
    customElements.define("custom-element-"+tag, customElement, { extends: tag })
}

<ul is="custom-element-ul">

</ul>

<div is="custom-element-div">

</div>
<p>I want to create a custom element class that can be use on basically any type of element if <code>is="foo-element"</code> is present, but I get the feeling that it's not possible.</p>
<p>The closest I have been able to come up with is this abomination.</p>
<pre><code>const allTags = ["ul", "div" /* etc... */]
for (const tag of allTags) {
const baseCalss = document.createElement(tag).constructor
const customElement = class extends baseCalss {
constructor() { super() }
}
customElements.define("custom-element-"+tag, customElement, { extends: tag })
}

<ul is="custom-element-ul">

</ul>

<div is="custom-element-div">

</div>
</code></pre>
Continue reading...
 

Latest posts

Top