<h1>Demo</h1>

<template>
    <style>
        h1 { color: red; }
    </style>
    <h1>
        Hello, <slot>World</slot>!
    </h1>
</template>

<script>
    const template = document.querySelector('template');

    class MyComponent extends HTMLElement {
        constructor() {
            super()
                .attachShadow({mode: 'open'})
                .append(... template.content.cloneNode(true).childNodes);
        }
    }

    customElements.define('my-component', MyComponent);
</script>

<my-component>Web components</my-component>

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.