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