Web Components 的一些入门知识
是什么
是一个Web组件标准。Web Components通过一种标准化的非侵入的方式封装一个组件，每个组件能组织好它自身的HTML、CSS、JavaScript，并且不会干扰页面上的其他代码。
组成部分
包括以下四种技术(每种都可以被单独使用)
- Templates
- 模板。该元素的特点是其中的内容虽然会被浏览器解析（规范上这么说），但是并不会被真正的激活，例如脚本不会被执行，图片不会被加载，也不会被渲染到页面上。直到通过脚本把它激活。
- 支持template标签和slot标签。slot标签支持动态替换模板中的HTML内容，它用name属性来作为唯一表示。template中的内容被插入到DOM之前，不会渲染，它可以放在document中的任何位置
- Custom Elements
- 一种可以允许开发者在 document 中定义并使用的新的 dom 元素类型，即自定义元素
- 构造函数中可以指定多个不同的回调函数，它们将会在元素的不同生命时期被调用
- connectedCallback：当 custom element首次被插入文档DOM时，被调用
- disconnectedCallback：当 custom element从文档DOM中删除时，被调用
- adoptedCallback：当 custom element被移动到新的文档时，被调用
- attributeChangedCallback：当 custom element增加、删除、修改自身属性时，被调用
- Shadow DOM
- 一种可以在document下组合多个同级别并且可以项目作用的DOM树的方法
- Imports
- 一种允许一个 html 文档在别的 htmldocuments 中包含和复用的方法
示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<template>
<style>
.com {
font-size: 20px;
}
</style>
<div class="com">my component</div>
</template>
<body>
<my-view></my-view>
<script>
(function () {
// Creates an object based in the HTML Element prototype
// 基于HTML Element prototype 创建obj
var element = Object.create(HTMLElement.prototype);
// 获取特mplate的内容
var template = document.currentScript.ownerDocument.querySelector(
'template'
).content;
// element创建完成之后的回调
element.createdCallback = function () {
// 创建 shadow root
var shadowRoot = this.createShadowRoot();
// 向root中加入模板
var clone = document.importNode(template, true);
shadowRoot.appendChild(clone);
};
document.registerElement('my-view', {
prototype: element,
});
})();
</script>
</body>
</html>
