Shadow DOM与局部作用域实例页面

展示

代码

• HTML：

  <p>我是一个普通的&lt;p&gt;元素，我的背景色是？</p>
  <div id="hostElement"></div>

• JavaScript：

  // 创建 shadow DOM
  var shadow = hostElement.attachShadow({mode: 'open'});
  // 给 shadow DOM 添加文字
  shadow.innerHTML = '<p>我是由Shadow DOM创建的&lt;p&gt;元素，我的背景色是？</p>';
  // 添加CSS，文字背景色变成黑色
  shadow.innerHTML += '<style>p { background-color: #333; color: #fff; }</style>';