Source Code:
(back to article)
Submit
Result:
Report an issue
<body> <custom-card title="Hello World"></custom-card> <script> class CustomCard extends HTMLElement { constructor() { super(); const shadowRoot = this.attachShadow({ mode: 'open' }); shadowRoot.innerHTML = ` <style> .card { padding: 10px; border: 1px solid #ddd; border-radius: 5px; box-shadow: 0 2px 5px rgba(0,0,0,0.2); } .card-title { font-size: 1.2em; margin-bottom: 5px; } </style> <div class="card"> <div class="card-title">${this.getAttribute('title')}</div> <div class="card-content"><slot></slot></div> </div> `; } } customElements.define('custom-card', CustomCard); </script> </body>