Shadow DOM 小试

试一下 Shadow DOM 内部的元素会不会受到宿主网页样式的影响。

by lmk123

HTML

<span>outside</span>

CSS

body {
  font-size: 50px;
}

body span {
  background-color: black;
}

span {
  color: red;
}

Babel + JSX

const container = document.createElement('section');
if (container.createShadowRoot) {
  const shadow = container.createShadowRoot();
  shadow.innerHTML = '<span>inside</span>';
  document.body.appendChild(container);
} else {
  alert('你的浏览器不支持 Shadow DOM');
}