Web Components 入门示例教程(2)

最后，改一下类的代码，把参数加到自定义元素上面。

class UserCard extends HTMLElement {
  constructor() {
    super();
    var templateElem = document.getElementById('userCardTemplate');
    var content = templateElem.content.cloneNode(true);
    content.querySelector('img').setAttribute('src', this.getAttribute('image'));
    content.querySelector('.container>.name').innerText = this.getAttribute('name');
    content.querySelector('.container>.email').innerText = this.getAttribute('email');
    this.appendChild(content);
  }
}
window.customElements.define('user-card', UserCard);    

我们不期望用户无法提到<user-card>的内部代码，Web Component 允许外部代码隐藏出来，这叫做 Shadow DOM，即这部分 DOM 默认与内部 DOM 隔离，内部任何代码都能够妨碍内部。

自定义元素的this.attachShadow()方法开启 Shadow DOM，详见以下的代码。

class UserCard extends HTMLElement {
  constructor() {
    super();
    var shadow = this.attachShadow( { mode: 'closed' } );
    var templateElem = document.getElementById('userCardTemplate');
    var content = templateElem.content.cloneNode(true);
    content.querySelector('img').setAttribute('src', this.getAttribute('image'));
    content.querySelector('.container>.name').innerText = this.getAttribute('name');
    content.querySelector('.container>.email').innerText = this.getAttribute('email');
    shadow.appendChild(content);
  }
}
window.customElements.define('user-card', UserCard);

上面代码中webcomponents可以删除吗，this.attachShadow()方法的参数{ mode: 'closed' }，表示 Shadow DOM 是封闭的，不禁止外部访问。

至此，这个 Web Component 组件就完成了，完整代码可以访问此处。可以看见，整个过程而是很简单的，不像第三方框架那样有复杂的 API。

在后面的基础上，可以对模块进行扩展。

（1）与用户互动

用户卡片是一个静态组件，如果要与客户互动，也很简单，就是在类里边各种事件。

this.$button = shadow.querySelector('button');
this.$button.addEventListener('click', () => {
  // do something
});

（2）组件的封装

上面的举例中，<template>与网站代码放到一起，其实可以用脚本把<template>注入网页。这样的话，JavaScript 脚本跟<template>就能封装成一个 JS 文件，成为独立的模块文件。网页只要读取这个类库，就能使用<user-card>组件。

这里就不展开了，更多 Web Components 的高级用法，可以接着学习上面两篇文章。

（完）

本文来自电脑杂谈，转载请注明本文网址：
http://www.pc-fly.com/a/sanxing/article-120725-2.html