kristoferjoseph/wc-slots.html

## 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>
	<!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>