<!DOCTYPE html>
<html>
<head>
<!-- web components polyfills -->
<script src="//unpkg.com/@webcomponents/custom-elements"></script>
<script src="//https://unpkg.com/@webcomponents/webcomponentsjs"></script>
<script src="//unpkg.com/@webcomponents/shadydom"></script>
<link rel="stylesheet" href="//unpkg.com/@webcomponents/shadycss">
</head>
<body>
<script>
class FancyTabs extends HTMLElement {
constructor() {
super();
const shadowRoot = this.attachShadow({mode: 'open'});
shadowRoot.innerHTML = `
<div id="tabs">
<slot name="title"></slot> <!-- named slot -->
</div>
<div id="panels">
<slot></slot>
</div>
`;
}
}
customElements.define('fancy-tabs', FancyTabs);
</script>
<h1>Shadow DOM</h1>
<h2>Composition and Slots</h2>
<fancy-tabs>
<button slot="title">Title</button>
<button slot="title">Title 2</button>
<section>content panel 1</section>
<section>content panel 2</section>
</fancy-tabs>
</body>
</html>