示例地址：http://haiyang.me/html5/slot.html
代码如下：
<!DOCTYPE html>
<html>
<head>
<title>Slot Example</title>
<style>
element-details {border: 1px solid blue; display: block; }
</style>
</head>
<body>
<template id="element-details-template">
<div>
<slot name="element-name">NEED NAME</slot>
<slot name="attributes"><p>PLACEHOLDER</p></slot>
</div>
</template>
<element-details>
<div slot="element-name">Slot.</div>
<div slot="attributes">The name of the slot 111.</div>
<div slot="attributes">The name of the slot 222.</div>
</element-details>
<hr>
<element-details>
<div slot="element-name">Template</div>
</element-details>
<hr>
<element-details>None</element-details>
<script>
customElements.define('element-details',
class extends HTMLElement {
constructor() {
super()
const template = document.getElementById('element-details-template').content
const shadowRoot = this.attachShadow({mode: 'open'}).appendChild(template.cloneNode(true))
}
})
</script>
</body>
</html>