Web Components入门教程(3)

我们应该构建下createdCallback方法。本次，除了设置innerHTML之外，我们添加一些额外的操作：

createdCallback: { 
 
value: function() { 
 
var shadow = this.createShadowRoot(); 
 
shadow.innerHTML = '<h1>SHADOW DOM!</h1>'; 
 
} 
 
} 

在这个示例中， 你会注意到‘SHADOW DOM!’，但是查看源码时你会看到只有空白的<my-element /> 标签而已。这里使用建立Shadow Root 方法代替了直接设置页面。

Shadow Root中的任何组件，是肉眼可见的，但是和当前页面的风格和DOM API相隔离。这样就实现了自定义组件是一个独立模块的假象。

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