前言
Web Components 已经听过很多年了, 但在开发中用纯 DOM 来实现还是比较少见的. 通常我们是配搭 Angular, React, Vue, Lit 来使用.
这篇就来讲讲 纯 Web Components 长什么样子吧. Lit 和 Angular 的实现是尽可能依据规范的哦.
参考
YouTube – Web Components Crash Course
Web Components 基础入门-Web Components概念详解（上）
介绍
Web Components 其实是一个大概念, 它又可以被分为几个部分. 大家拼凑一起才完整了 Web Components.
这些小概念分别是: Custom Elements, Shadow DOM 和 HTML Templates. 我们先把它们挨个挨个分开看. (它们单独也可以 working 的哦)
HTML Templates
它最简单, 所以说说它先, 以前我们做动态内容是直接写 HTML Raw 的. 但这个方法对管理分成不友好.
现在都改成用 Template 来管理了.
定义 template
<body>
<template>
<h1>dynamic title here...</h1>
<p>dynamic content here...</p>
</template>
</body>
template 是不会渲染出来的. 它只是一个模型.
使用 template
// step 1 : 获取 template
const template = document.querySelector<HTMLTemplateElement>("template")!;
// step 2 : clone and binding data
const templateContent = template.content.cloneNode(true) as DocumentFragment;
templateContent.querySelector("h1")!.textContent = "Hello World 1";
templateContent.querySelector("p")!.textContent =
"Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium, laborum.";
// step 3 : append to target
document.body.appendChild(templateContent);
记得要先 clone 了才能使用.
Convert DocumentFragment to Raw String
template.content 是 DocumentFragment 来的, 有时候会需要把它转成 Raw HTML (比如我在 Google Map JavaScript API Info Window 的时候)
参考: Converting Range or DocumentFragment to string
有 2 招.
1. 创建一个 div 把 frag 丢进去, 然后 .innerHTML 取出来.
const div = document.createElement("div");
div.appendChild(templateContent);
console.log("rawHtml", div.innerHTML);
2. 用 XMLSerializer
const serializer = new XMLSerializer();
const rawHtml = serializer.serializeToString(templateContent);
console.log("rawHtml", rawHtml);
个人感觉, 第一招会比较安全一些. 毕竟 XML 和 HTML 还是有区别的. 未必 XMLSerializer 能处理好 HTML (只是一个猜想而已)
标签：Web,const,Components,DOM,HTML,template,templateContent From： https://www.cnblogs.com/keatkeat/p/16743532.html