Web Components入门教程(2)

注册一个新组件也非常简单：

// 'document.register' 返回一个构造函器 
var MyElement = document.register('my-element'); 

你可能注意到上面的自定义组件名称包括一个连接符。这是为了保证自定义组件名称不和浏览器内置模块不冲突。

现在<my-element />这个模块具有了原生部件的特点，

所以，自定义组件也相同可以进行普通的DOM操作：

document.create('my-element'); 
 
el.innerHTML = '<my-element />'; 
 
document.create('my-element'); 

当前webcomponents可以删除吗，这个自定义组件只是有框架，而没有内容，下面让我们向其中添加一些内容：

//我们将提供'document.register'的第二个参数： 
document.register('my-element', { 
  prototype: Object.create(HTMLElement.prototype, { 
    createdCallback: { 
      value: function() { 
        this.innerHTML = '<h1>ELEMENT CREATED!</h1>'; 
      } 
    } 
  }) 
}); 

在这个示例中webcomponents可以删除吗，我们修改自定义组件的prototype，使用Object.create 方法建立一个继承于HTMLElement的对象。在这个办法中设置该模块的属性 innerHTML。

我们定义了createdCallback方法，在经常声明实例时调用。你相同可以有选择性的定义attributeChangedCallback、 enteredViewCallback 和leftViewCallback等方式。

目前为止我们推动了动态设置自定义组件内容的用途，我们一直还要提供自定义组件的封装方式，用于隐藏其外部模块。

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