<!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 = `
<style>
:host {
padding: 10px;
background: #eee;
display:block;
}
:host .blue {
color: blue;
}
:host(:hover) {
color: #666;
}
#tabs {
background: #9999ff;
}
#panels {
box-shadow: 0 2px 2px rgba(0, 0, 0, .3);
background: grey;
}
</style>
<div class="blue">:host</div>
<div id="tabs">
#tabs
<slot name="title"></slot>
</div>
<div id="panels">
#panels
<slot></slot>
</div>
`;
}
}
customElements.define('fancy-tabs', FancyTabs);
</script>
<h1>Shadow DOM</h1>
<h2>Scoped Style :host</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>
<div id="tabs">#tabs</div>
<div id="panels">#panels</div>
</body>
</html>