Skip to content

Instantly share code, notes, and snippets.

@kristoferjoseph

kristoferjoseph/wc-slots.html

Last active July 23, 2021 20:14
Show Gist options
  • Save kristoferjoseph/e329a9b9b7bb07735941b4a6a8062379 to your computer and use it in GitHub Desktop.
Save kristoferjoseph/e329a9b9b7bb07735941b4a6a8062379 to your computer and use it in GitHub Desktop.
Download ZIP
Test for slot overrides.
Raw
wc-slots.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<template id=begin-page-template>
<h1>Begin Page</h1>
<begin-content>
<h3 slot=title>YOLO</h3>
</my-content>
</template>
<template id=begin-content-template>
<h2>Begin Content</h2>
<slot name=title>
<h3>
Title
</h3>
</slot>
<begin-list>
<ul slot=list>
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
</begin-list>
</template>
<template id=begin-list-template>
<h4>Begin list</h4>
<slot name=list>
<ul>
<li>a</li>
</ul>
</slot>
</template>
<begin-page>
<begin-content>
<begin-list></begin-list>
</begin-content>
</begin-page>
<script type=module>
customElements.define(
'begin-page',
class BeginPage extends HTMLElement {
constructor() {
super()
const template = document
.getElementById('begin-page-template')
.content
const shadowRoot = this.attachShadow({ mode: 'open' })
.appendChild(template.cloneNode(true))
}
}
)
customElements.define(
'begin-content',
class BeginContent extends HTMLElement {
constructor() {
super()
const template = document
.getElementById('begin-content-template')
.content
const shadowRoot = this.attachShadow({ mode: 'open' })
.appendChild(template.cloneNode(true))
}
}
)
customElements.define(
'begin-list',
class BeginList extends HTMLElement {
constructor() {
super()
const template = document
.getElementById('begin-list-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