Shadow DOM
https://developer.mozilla.org/zh-CN/docs/Web/Web_Components/%E5%BD%B1%E5%AD%90_DOM
瀏覽器支援行情 Shadow DOM v1(Can I use)
https://caniuse.com/#feat=shadowdomv1
神奇的Shadow DOM
https://aotu.io/notes/2016/06/24/Shadow-DOM/index.html
神秘的 shadow-dom 淺析
http://www.cnblogs.com/coco1s/p/5711795.html
深度介紹：你聽說過原生 HTML 組件嗎？
https://juejin.im/post/5bc7ead7f265da0afc2c2c6b
Web Components
http://www.ayqy.net/blog/web-components/
Shadow DOM 為Web元件中的 DOM和 CSS提供了封裝，游離在 DOM 樹之外的節點樹，但是他的創建基於普通 DOM 元素（非 document），並且創建後的 Shadow-dom 節點可以從介面上直觀的看到。更重要的是，Shadow-dom 具有良好的密封性。
Shadow DOM可視為流覽器提供的一種封裝功能，提供了一種強大的技術去隱藏一些實現細節。以 w3c 上的一個 <video> 例子為例，我們僅僅是填寫了一個空白的標籤，再加上 src 屬性裡填上視頻位址，就可以播放視頻，而其內部就是通過Shadow DOM包裝一般的DOM，將video實做細節放於內，只是一般瀏覽無法可見。
另外目前瀏覽器的支援度有限，可使用webcomponents.js，使Shadow DOM實現於非 native 支持的流覽器上。
#Shadow DOM, Javascript, Web Components
https://developer.mozilla.org/zh-CN/docs/Web/Web_Components/%E5%BD%B1%E5%AD%90_DOM
瀏覽器支援行情 Shadow DOM v1(Can I use)
https://caniuse.com/#feat=shadowdomv1
神奇的Shadow DOM
https://aotu.io/notes/2016/06/24/Shadow-DOM/index.html
神秘的 shadow-dom 淺析
http://www.cnblogs.com/coco1s/p/5711795.html
深度介紹：你聽說過原生 HTML 組件嗎？
https://juejin.im/post/5bc7ead7f265da0afc2c2c6b
Web Components
http://www.ayqy.net/blog/web-components/
Shadow DOM 為Web元件中的 DOM和 CSS提供了封裝，游離在 DOM 樹之外的節點樹，但是他的創建基於普通 DOM 元素（非 document），並且創建後的 Shadow-dom 節點可以從介面上直觀的看到。更重要的是，Shadow-dom 具有良好的密封性。
Shadow DOM可視為流覽器提供的一種封裝功能，提供了一種強大的技術去隱藏一些實現細節。以 w3c 上的一個 <video> 例子為例，我們僅僅是填寫了一個空白的標籤，再加上 src 屬性裡填上視頻位址，就可以播放視頻，而其內部就是通過Shadow DOM包裝一般的DOM，將video實做細節放於內，只是一般瀏覽無法可見。
另外目前瀏覽器的支援度有限，可使用webcomponents.js，使Shadow DOM實現於非 native 支持的流覽器上。
#Shadow DOM, Javascript, Web Components
留言
張貼留言