Source Code:
(back to article)
Submit
Result:
Report an issue
<body> <!-- Define Custom Element --> <script> // Define Custom Element Class class CustomElement extends HTMLElement { constructor() { super(); const shadowRoot = this.attachShadow({ mode: 'open' }); shadowRoot.innerHTML = ` <style> /* Define styles for the component */ .container { border: 1px solid #ccc; padding: 20px; } </style> <div class="container"> <slot name="content">Default content</slot> </div> `; } } // Define Custom Element customElements.define('custom-element', CustomElement); </script> <!-- Displaying the custom element --> <custom-element> <div slot="content">Content from parent</div> </custom-element> </body>