A <tabs-panel /> accepts contents for two slots, named "tab" and "content". The tabs are shown spaced out and clickable, controlling their associated content.
Critique or comments welcome.
tabs.html:
<html>
<body>
<tabs-panel>
<div slot="tab" data-target="#out1" class="active tab">first</div>
<div slot="tab" data-target="#out2" class="tab">second</div>
<div slot="tab" data-target="#out3" class="tab">third</div>
<div id="out1" slot="content" class="active content">Content 1: the first</div>
<div id="out2" slot="content" class="content">Content 2: which follows after</div>
<div id="out3" slot="content" class="content">Content 3: where it all ends</div>
</tabs-panel>
</body>
<script src="tabs.js"></script>
</html>
tabs.js:
const tabsPanelTemplate = document.createElement( "template" ); tabsPanelTemplate.innerHTML = `
<style>
.tabs{
display: flex;
justify-content: flex-start;
}
::slotted([slot="tab"]) {
cursor: pointer;
padding: 1ex;
margin: 1ex;
}
::slotted([slot="tab"].active) {
border: solid 1px;
}
::slotted([slot="content"]){
display: none;
}
::slotted([slot="content"].active){
display: block;
}
</style>
<slot name="tab" class="tabs"></slot>
<hr>
<slot name="content"></slot>
`;
class TabsPanel extends HTMLElement {
constructor() {
super();
this.attachShadow( {mode:"open"} );
this.shadowRoot.appendChild( tabsPanelTemplate.content.cloneNode(true) );
}
connectedCallback() {
this.querySelectorAll('[slot="tab"]').forEach( tab => {
tab.addEventListener( "click", e => {
this.querySelectorAll("[slot]").forEach( tab => tab.classList.remove( "active" ) );
tab.classList.add( "active" );
this.querySelector( tab.dataset.target ).classList.add( "active" );
})
});
}
disconnectedCallback() {
this.querySelectorAll('[slot="tab"]').forEach( tab => {
tab.removeEventListener();
});
}
};
window.customElements.define( "tabs-panel", TabsPanel );
--- SoupGate-Win32 v1.05
* Origin: fsxNet Usenet Gateway (21:1/5)