shadow dom可以做什麼用？

新版Chrome中可以開啟Shadow Dom功能，支持Web components的自定義。 這個功能對Web開發來說，作用有多大？ 與目前的前端框架比，有什麼優勢？

簡介可看A Guide to Web Components | CSS-Tricks

ShadowDOM最大的用處應該是隔離外部環境用於封裝組件,

設想一下瀏覽器原生的一些組件, 比如`&`

它有一種既定的樣式，外部css不會影響到它，可能你會覺得因為它就是原生的組件所以封的這麼死啊

而ShadowDOM就是可以讓自己寫的組件擁有這種能力, perfect!!

-------

當然, 原生的組件還是有辦法定義樣式的，但只有限定的元素可以，就是通過偽類

比如`range`的按鈕可以使用`::slider-thumb `來定義樣式。

等等還有， 相應的不僅僅是css，dom結構也會被隔離起來, 外部js無法直接訪問改變組件的domtree。想要某塊指定的內容可以被改變？ 沒問題, ShadowDOM也可以做到！

http://jsbin.com/AYaXobAM/1/edit 關於定義原生組件的樣式

作用多大 這個不好回答 你覺得組件作用有多大

前端框架里定義的組件其實並不是嚴格意義上的組件 因為除了組件之外 還有渲染的功能 比如vue組件中 v-if、v-for算是組件的內容嗎 這個是渲染的功能 在各種後端模板引擎中倒是能經常看到這中if、for的語句 所以前端框架的組件 還包含了渲染的功能

而Web Components僅僅是組件而已 不過Web Components優勢的話是不需要重新解析模板 瀏覽器可以直接渲染出結果性能會好一些 而且隔離了外部環境 這個比較有用 特別是css全局污染的問題

一個自己寫的簡單的例子 web component

把多圖選擇並預覽的列表用Web Component封裝成組件