<h1>Demo</h1>

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

<script>
    const {
        content
    } = document.querySelector('template');
    //     
    class MyComponent extends HTMLElement {
        constructor() {
            super()
                .attachShadow({
                    mode: 'open'
                })
                .append(content.cloneNode(true));
        }
    }
    customElements.define('my-component', MyComponent);
</script>

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