Skip to content

Instantly share code, notes, and snippets.

@kristoferjoseph
Created July 24, 2021 16:08
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save kristoferjoseph/c8fc4822b965131c4886cc3342d7b723 to your computer and use it in GitHub Desktop.
Save kristoferjoseph/c8fc4822b965131c4886cc3342d7b723 to your computer and use it in GitHub Desktop.
<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