Closed
Description
Hi,
I would like to get your thoughts on having a switch for customElement behaviour.
Current custom elements are based on shadow DOM which can be really handy in some cases.
But in our project we heavily depend on cascading - components style depends on its context. (e.g. Button colors are different for different types of containers)
It would be handy, if we could choose between using shadow DOM and a simpler version without it. In the similar way we attach slots in connectedCallback, we could import the component itself into the the main document.
Here is a very crude example of the custom element without shadowDOM:
<template id="my-box">
<style>
:host {
border: 1px solid #666;
}
</style>
<p class="red"></p>
</template>
<script>
(function() {
const doc = (document._currentScript || document.currentScript).ownerDocument;
const template = doc.querySelector('#my-box');
customElements.define('my-box', class extends HTMLElement {
constructor() {
super();
}
connectedCallback() {
const temp = document.importNode(template.content, true);
this.appendChild(temp);
}
});
})();
</script>
<style>
.red {
color: #F00;
}
</style>
<my-box></my-box>Would someone else also find this useful?