it sounds like the thing you are looking for are slots and they are supported in shadow DOM with the HTMLSlotElement
<tab-area>
<tab- text='First'>
...arbitrary HTML that should work intuitively, i.e. be styled
like the rest of the document.
</tab->
<tab- text='Second'>
Note the lack of slot attributes on these tab elements. That's
because we want this to behave like normal HTML where you
can nest without having to worry about how tab-area was implemented.
Why should we have to care that tab-area was implemented with
templates/slots?
</tab->
<tab- text='Third'>
There could be any number of these tabs so you can't put them
into slots without some sort of late-generating the slots anyway.
</tab->
</tab-area>
That's not achievable with slots.
In general, I haven't found a case where templates/slots are actually useful--it's a lot of work to create a bad interface.
In regards of slots, they are a nice way to allow a user of you webcomponent to overwrite/replace parts of your component with something else. This is most of the time a more advanced feature and I find it quite nice to build headless components
That's exactly what I'm saying is bad. Why does the user of the howto-tabs have to type "slot='panel'" when that information is already communicated by the fact that it's a "howto-panel" inside a "howto-tabs"? This is a useless leaking of implementation details.
And that page just keeps going and going. Sure, some of that is because they're implementing a few neat features, but most of it is because slots are way overcomplicated for something that's actually easier to do without them.
class HnTabs extends HTMLElement {
constructor() {
super();
this._tabs = {}
this.attachShadow({ mode: 'open' })
const ul = document.createElement('ul')
this.shadowRoot.appendChild(ul)
const slot = document.createElement('slot')
this.shadowRoot.appendChild(slot)
slot.addEventListener('slotchange', () => {
ul.innerHTML = ''
const tabs = Array.from(this.querySelectorAll('hn-
if (!tabs.some((tab) => tab.hasAttribute('active')
tabs[0].setAttribute('active', '')
}
tabs.forEach((tab) => {
const li = document.createElement('li')
li.innerText = tab.getAttribute('text')
ul.appendChild(li)
li.addEventListener('click', (e) => {
tabs.forEach((t) => t.removeAttribute('active'
tab.setAttribute('active', '')
})
})
})
}
}
customElements.define('hn-tabs', HnTabs);
class HnTab extends HTMLElement {
static get observedAttributes() {
return ['active'];
}
constructor() {
super()
this.attachShadow({ mode: 'open' });
this._slot = document.createElement('slot')
this.shadowRoot.appendChild(this._slot)
this._slot.style.display = 'none'
console.log(this.slot)
}
attributeChangedCallback() {
this.#activeStatus()
}
connectedCallback() {
this.#activeStatus()
}
#activeStatus(){
const active = this.hasAttribute('active');
this._slot.style.display = active ? 'block' : 'none'
}
}
customElements.define('hn-tab', HnTab);