你的前端框架要被 Web 组件取代了(11)


class MyElement extends HTMLElement { ... connectedCallback() { this.container = this.shadowRoot.querySelector('#container'); // dispatchEvent is now called on this.container instead of this this.container.dispatchEvent(new CustomEvent('custom', { detail: {message: 'a custom event'}, composed: true // without composed: true this event will not bubble out of Shadow DOM })); }}
image.png
模板元素除了使用 this.shadowRoot.innerHTML 将 HTML 添加到元素的影子根之外，你还可以使用<template>元素来执行此操作。模板会包含 HTML 供以后使用。它不会被呈现，最初只会被解析以确保其内容是有效的。模板内的 JavaScript 不会被执行，也不会获取任何外部资源。默认情况下它是隐藏的。
当 Web 组件需要根据不同情况呈现完全不同的标记时，可以使用不同的模板来完成此任务：

class MyElement extends HTMLElement { ... constructor() { const shadowRoot = this.attachShadow({mode: 'open'}); this.shadowRoot.innerHTML = ` <template id="view1"> <p>This is view 1</p> </template> <template id="view1"> <p>This is view 1</p> </template> <div id="container"> <p>This is the container</p> </div> `; } connectedCallback() { const content = this.shadowRoot.querySelector('#view1').content.clondeNode(true); this.container = this.shadowRoot.querySelector('#container'); this.container.appendChild(content); }}