Created
July 24, 2021 16:08
-
-
Save kristoferjoseph/c8fc4822b965131c4886cc3342d7b723 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<html> | |
<head></head> | |
<body> | |
<template id=my-paragraph-template> | |
<p> | |
<slot name="my-text"> | |
My default text | |
</slot> | |
</p> | |
</template> | |
<my-paragraph> | |
<span slot="my-text">Let's have some different text!</span> | |
<my-paragraph> | |
<span slot="my-text">Some other text</span> | |
</my-paragraph> | |
</my-paragraph> | |
<script> | |
customElements.define( | |
'my-paragraph', | |
class BeginList extends HTMLElement { | |
constructor() { | |
super() | |
const template = document | |
.getElementById('my-paragraph-template') | |
.content | |
const shadowRoot = this.attachShadow({ mode: 'open' }) | |
.appendChild(template.cloneNode(true)) | |
} | |
}) | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment