SOURCE

console 命令行工具 X clear

                    
>
console
customElements.define('person-details',
    class extends HTMLElement {
        constructor() {
            super();
            const template = document.getElementById('person-template');
            const templateContent = template.content;
            const shadowRoot = this.attachShadow({ mode: 'closed' });
            shadowRoot.appendChild(templateContent.cloneNode(true));
        }
    });
<template id="person-template">
	<div>
		<h2>Personal ID Card</h2>
		<slot name="person-name">NAME MISSING</slot>
		<ul>
			<li>
				<slot name="person-age">AGE MISSING</slot>
			</li>
			<li>
				<slot name="person-occupation">OCCUPATION MISSING</slot>
			</li>
		</ul>
	</div>
</template>
<person-details>
	<!-- 官方例子p slot="person-name",由于hexo对p的解析会出错,这里改成了<span> -->
	<span slot="person-name">Morgan Stanley</span>
    <span slot="person-age">36</span>
    <span slot="person-occupation">Accountant</span>
</person-details>