html 组件化 编辑,Web Component 真正实现组件化

为什么说web component 真正实现组件化，因为它通过标准化非侵入的方式封装一个组件，每个组件能组织好它自身的 HTML 结构、CSS 样式、JavaScript 代码，它通过Shadow DOM 在文档中创建一个完全独立于其他元素的DOM树，主文档和基于shadow DOM创建的独立组件之间是互相不干扰的。

下面还是写一个web component例子：

1. 基本的index.html

Web Component

Web Component

// 通过更新组件的属性，来触发title的改变

setTimeout(function() {

document.querySelector('#zf').setAttribute('title', '你好, 世界!');

}, 1000)

2. 创建一个web component

.title {

color: red;

}

你好

(function () {

var thisDoc = document.currentScript.ownerDocument;

var template = thisDoc.querySelector('template').content;

var element = Object.create(HTMLElement.prototype);

// 初始化创建的时候回调

element.createdCallback = function() {

var clone = document.importNode(template, true);

// 开启shadow的子根节点，这样才能 this.shadowRoot.querySelector('.title')获取到h1

var shadowRoot = this.attachShadow({ mode: 'open' });

shadowRoot.appendChild(clone);

}

// 属性改变的时候触发的回调

element.attributeChangedCallback = function(attr, oldVal, newVal) {

this.shadowRoot.querySelector('.title').innerText = newVal;

}

document.registerElement('zhangfu-div', {

prototype: element

})

}());

把index.html跑起来，我们看一下document的结果:

image.png

如上我们就创建了一个互不干扰的独立DOM组件, 可以跑一下代码感受一下, 完整代码