无依赖自定义组件的实践

[Wscats]

组件

无依赖自定义组件的实践需要依赖三个技术(浏览器原生就支持组件化)

• Custom elements（自定义元素）customElements.define('my-header', Xheader)
• Shadow DOM（影子DOM）attachShadow
• HTML templates（HTML模板）<template>和 <slot>

// HTML模板技术包含两个标签：<template>和 <slot>
// 当需要在页面上重复使用同一个 DOM结构时，可以用 template 标签来包裹它们，然后进行复用
// slot标签让模板更加灵活，使得用户可以自定义模板中的某些内容
const str =
 `
 <style>
 header {
 height: 50px;
 line-height: 50px;
 width: 100%;
 text-align: center;
 color: white;
 background-color: red;
 }
 </style>
 <header><slot name="my-title">头部</slot></header>
 `
class Xheader extends HTMLElement {
 constructor() {
 super();
 const template = document.createElement('template');
 template.innerHTML = str;
 const templateContent = template.content;
 // 创建一颗可见的DOM树，这棵树会附着到某个DOM元素上
 // 这棵树的根节点称之为shadow root，只有通过shadow root 才可以访问内部的shadow dom，并且外部的css样式也不会影响到shadow dom上
 // 相当于创建了一个独立的作用域
 this.attachShadow({
 mode: 'open'// 'open' 表示该shadow dom可以通过js 的函数进行访问
 }).appendChild(
 templateContent.cloneNode(true)// 操作shadow dom
 );
 }
}
// 允许自定义元素及其行为，然后可以在您的用户界面中按照需要使用它们
customElements.define('my-header', Xheader);

事件绑定

经过测试，发现需要在appendChild()之后，才能绑定事件

attachShadow.appendChild(
 templateContent.cloneNode(true) // 操作shadow dom
);
// 编译模板,要在appendChild之后
attachShadow.querySelector(xxx);
let nodes = attachShadow.childNodes;