Web Components入门教程

// 创建带有属性的input标签... 
 
el.innerHTML = '<input type="text" value="foobar" />'; 
 
//这时value属性已经同步 
 
el.querySelector('input').value; 

组件可以响应属性的变化:

// 如果我们更改value 属性值 
input.setAttribute('value', 'Foobar'); 
 
//属性值会立即更改 
input.value === 'Foobar'; // true 

组件可以有外部隐藏的DOM结构：

<!—使用一个input实现复杂的日历功能--> 
<input type="date" /> 
  
 // 尽管其内部结构比较复杂，但是已经封装成为一个组件 
dateInput.children.length === 0; // true 

组件可以使用子组件:

<!—可以给组件提供任意个 'option' 标签--> 
 
<select> 
 
<option>1</option> 
 
<option>2</option> 
 
<option>3</option> 
 
</select> 

组件可以为其子组件提供样式:

dialog::backdrop { 
 
    background: rgba(0, 0, 0, 0.5); 
 
} 

最后，组件可以有外置样式。和自定义插件不同，我们不需要为浏览器的原生控件引用CSS文件。

有了以下的知道，我们即将具有认识Web组件的基础。使用自定义组件和Shadow DOM，我们可以在我们的插件中定义所有那些标准行为。

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