html 标准组件,web组件标准 web components

组件的概念

组件，是数据和方法的一个封装，其定义了一个可重用的软件元素的功能，展示和使用，通常表现为一个或一组可重用的元素。

组件的特性

可拓展性：既然组件是针对某一特定功能或需求开发的，那它就必须易于开发和拓展；

封装性：组件作为一个独立整体供使用，应该是对内修改，对外封闭，只供使用，而不对使用环境产生副作用；

易用性：组件的目的是产生可重用的独立部件，那就必须提供一种简单快捷的方式供使用。

Web Components特征

Web Components将一系列特性加入HTML和DOM规范，使得开发者可以自由创建在web应用或文档可重用的元素或部件，其由四部分组成：

HTML模板(HTML Templates)：HTML内的DOM模板，在元素内声明。

影子DOM(Shadow DOM)：组合对DOM和样式的封装；

HTML导入(HTML Imports)：定义在文档中导入其他HTML文档的方式；

自定义元素(Custom Elements)：定义新HTML元素的一系列API；

HTML模板

hello

(function() {

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

HelloButtonPrototype.who = function() {

alert('Hello!');

}

HelloButtonPrototype.createdCallback = function() {

this.addEventListener('click', function(e) {

HelloButtonPrototype.who();

});

}

document.registerElement('hello-button', {prototype: HelloButtonPrototype});

})();

影子DOM(Shadow DOM)

DOM，即文档对象模型，是HTML文档的一个结构表示，以树形结构表示一个文档，文档中元素间关系按照父子，兄弟关系排列；DOM规范提供一系列API支持我们操作文档节点，即通常所说的DOM API。

前面提到Web Components指封装DOM和样式，以组件的形式在文档中使用，而不同于JavaScript中函数会形成一个单独作用域，文档DOM树的层次结构中是不存在局部作用域概念的，也就是说文档内所有定义的样式都对整个文档产生影响，文档中的样式也会影响组件内的声明样式，而不限定于元素所处位置，这样显然极大阻碍了组件的独立性和可重用性，是必须要解决的问题，不过不用担心，这都已经解决了，解决方案就是下文介绍的attachShadow()方法。

影子DOM API提供了attachShadow()方法，创建一个影子DOM，支持将封装的内容或组件作为一个独立DOM子树附加进一个HTML文档，组件内与外部隔离，样式互不影响，这也印证了组件开发的封装性需求。

创建

要创建一个影子DOM，很简单，使用attachShadow()方法即可，而需要注意的是所有影子DOM必须和一个文档中存在的元素(HTML内置元素或自定义元素)绑定，才能使用：

var frag = document.createElement('div');

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

// open 可以通过javascript来获取shandow DOM 例如

// close的话，就是不可以在外部获取到shadow Dom 了，访问shadowRoot就会返回null

shadowRoot.innerHTML = '

Shadow DOM Content

';

// class写法

class SlotTest extends HTMLElement {

constructor() {

super();

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

}

connectedCallback() {

}

}

customElements.define('slot-test', SlotTest);

影子树(SHADOW TREE)与影子主体(SHADOW HOST)

上文使用attachShadow()方法创建的元素就是一个影子DOM，而其子内容就构成一棵影子树(shadow tree)，而和影子DOM绑定，也就是包含该树的文档内元素通常称为影子主体(shadow host)。

template 槽位(SLOT)

Menus

使用：

• home
• order
• about

渲染结果:

Menus

• Home
• order
• about

命名槽

Menus

• home
• order
• about

• menu home
• menu order
• menu about

渲染结果

Menus

• menu home
• menu order
• menu about

样式

Web Components定义的组件内的样式与外部环境的样式是互不影响的，那么如何为组件设置样式呢，依然使用

class SlotTest extends HTMLElement {

constructor() {

super();

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

this.shadowRoot.innerHTML = `

div h2 {

color: red;

}

Menus

`

}

connectedCallback() {

}

}

customElements.define('slot-test', SlotTest);

HTML引入(HTML Imports)

自定义元素(Custom Elements)

自定义元素支持开发者定义一类新HTML元素，声明其行为和样式，自定义元素分两类：

自定义标签元素(Autonomous custom elements)：完全独立于原始HTML元素标签的新标签元素，其所有行为需要开发者定义;

自定义内置元素(Customized built-in)：基于HTML原始元素标签的自定义元素，以便于使用原始元素的特性，开发者只需要定义拓展行为；

创建自定义标签元素

为了创建一个自定义标签元素，我们需要继承HTMLELement类, 如在很多页面我们经常会有一键回到页面顶部功能，我们创建一个返回顶部的组件：

class GoTop extends HTMLElement {

constructor() {

super();

this.addClick()

}

addClick() {

this.addEventListener('click',function(e) {

console.log(999);

(function smoothscroll(){

var currentScroll = document.documentElement.scrollTop || document.body.scrollTop;

if (currentScroll > 0) {

window.requestAnimationFrame(smoothscroll);

window.scrollTo (0,currentScroll - (currentScroll/5));

}

})();

})

}

connectedCallback() {

// 首次被插入文档DOM时，被调用

console.log(88888)

console.log(this.getAttribute('data-name'))

}

disconnectedCallback() {

// 文档DOM中删除时，被调用

}

adoptedCallback() {

// 被移动到新的文档时，被调用

}

attributesChangedCallback() {

// 元素的属性被增删改时执行

}

}

console.log(HTMLElement.prototype)

customElements.define('go-top', GoTop);

在需要使用该组件的页面只需像使用正常HTML元素一样：

Top

该元素的一切样式，行为，事件监听，默认行为均需要开发者自行定义

//带图片及link的组件

class ImgLink extends HTMLElement {

constructor() {

super();

}

connectedCallback() {

let src = this.getAttribute('src');

let height = this.getAttribute('height') || '100';

let width = this.getAttribute('width') || '100';

// Create a shadow root

let shadow = this.attachShadow({mode: 'open'});

// create img

let img = document.createElement('img');

img.src = src;

img.width = width;

img.height = height;

shadow.appendChild(img)

// create a

let link = document.createElement('a');

link.href = this.getAttribute('url');

link.innerText = this.getAttribute('name')

shadow.appendChild(link)

}

}

customElements.define('img-link', ImgLink);

使用