Skip to content

Instantly share code, notes, and snippets.

@robertsosinski

robertsosinski/test.html

Created October 28, 2024 13:45
Show Gist options
  • Save robertsosinski/e6b44c85fc8bca7b1ff8a49e45e601ce to your computer and use it in GitHub Desktop.
Save robertsosinski/e6b44c85fc8bca7b1ff8a49e45e601ce to your computer and use it in GitHub Desktop.
Download ZIP
A HTML page that uses Web Compoents, Templates with slot elements, and the Shadow DOM
Raw
test.html
<html>
<head>
</head>
<body>
<template id="custom-card-template">
<h2><slot name="card-title">Default Card Title</slot></h2>
<p><slot name="card-content">Default content goes here.</slot></p>
</template>
<custom-card>
<span slot="card-title">My First Title</span>
<span slot="card-content">This is my first card content!</span>
</custom-card>
<custom-card>
<span slot="card-title">My Second Title</span>
<span slot="card-content">This is my second card content!</span>
</custom-card>
<script>
customElements.define('custom-card', class CustomCard extends HTMLElement {
constructor() {
super();
const template = document.getElementById("custom-card-template");
const templateContent = template.content;
const shadowRoot = this.attachShadow({ mode: 'open' });
shadowRoot.appendChild(templateContent.cloneNode(true));
}
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment