ShadowDOM

ShadowDOMはstylesheetをカプセル化する仕組みです。
ShadowDOMを使用する場合は下記のようにjavascriptでcreateShadowRoot()を使用します。

  • HTML
<div id="contents"></div>
<script>
var root = document.querySelector('div#contents').createShadowRoot();
root.innerHTML = "<style>div{color: red;}</style><div>Hello!</div>";
</script>
  • 実行結果

div要素は他でも使用していますが赤くなるのはHello!のみです。
ShadowDOMを使用すれば外部要因を気にせず部品の提供ができます。

参考