<!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>
// Use custom elements API v1 to register a new HTML tag and define its JS behavior
// using an ES6 class. Every instance of <fancy-tab> will have this same prototype.
customElements.define('fancy-tabs', class extends HTMLElement {
constructor() {
super(); // always call super() first in the ctor.
// Attach a shadow root to <fancy-tabs>.
const shadowRoot = this.attachShadow({mode: 'open'});
shadowRoot.innerHTML = `
<style>#tabs { ... }</style> <!-- styles are scoped to fancy-tabs! -->
<div id="tabs">...</div>
<div id="panels">...</div>
`;
}
// ...
});
</script>
Nothing happens here. you need <slot>.
</body>
</html>