shadow dom一个最简单的例子
本文資料來自stackoverflow：https://stackoverflow.com/questions/34119639/what-is-shadow-root/34119775#34119775
The Shadow DOM is simply saying that some part of the page, has its own DOM within it. Styles and scripting can be scoped within that element so what runs in it only executes in that boundary.
頁面某部分擁有自己的DOM，以及對應的styles和script.
This is one of the primary pieces needed for Web Components to work. Which is a new technology allowing developers to build their own encapsulated components that developers can use just like any other HTML element.
是web Components能夠工作的基石。
shadow dom這個概念的引入，是為了解決傳統HTML技術的一個痛點：
The DOM tree inside a widget isn’t encapsulated from the rest of the page. This lack of encapsulation means your document stylesheet might accidentally apply to parts inside the widget; your JavaScript might accidentally modify parts inside the widget; your IDs might overlap with IDs inside the widget and so on.
https://www.html5rocks.com/en/tutorials/webcomponents/shadowdom/
看個具體的例子：
<html> <button>Hello, world!</button> <script> var host = document.querySelector('button'); var root = host.createShadowRoot(); root.textContent = 'こんにちは、影の世界!'; </script> </html>通過document.getElementById返回的元素的innerHTML仍然是原始dom的hello world：
要獲取更多Jerry的原創文章，請關注公眾號"汪子熙":
總結
以上是生活随笔為你收集整理的shadow dom一个最简单的例子的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 你不对劲猫动态表情包
- 下一篇： Angular应用里input字段后面的