examples/02-putting-content-into-shadow-dom.html

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible"
          content="ie=edge">
    <link rel="stylesheet"
          href="styles.css">
    <title>02 - Putting Content Into Shadow DOM</title>
</head>

<body>
    <h1>Open DevTools 🔨</h1>
    <h2>Check the code for instructions</h2>


    <!-- The element to which we'll attach the Shadow DOM -->
    <div class="element">
        <h1>Hello World!</h1>
    </div>

    <script>
        // When init() is commented, you'll see the .element div with 'Hello World!'
        // But once you run init, it attaches Shadow DOM to .element and only stuff
        // from within the shadow is rendered on page.
        init();

        // You'll also see that the <h1> inside shdow DOM has the margins
        // but the Hello World! <h1> didn't have it. 👀

        // We are going to later see how styles work in the shadows.

        function init() {
            // The element
            let el = document.querySelector('.element');

            // Attaching Shadow DOM to the element
            el.attachShadow({ mode: 'open' });

            // Getting hold of the shadowRoot
            let shadowRoot = el.shadowRoot;

            // Putting content inside shadowRoot
            let content = document.createElement('h1');
            content.innerText = "Hello from the Shadows";
            shadowRoot.appendChild(content);
        }
    </script>
</body>

</html>