Chrome瀏覽器如何查看 Shadow Dom 結構

Chrome瀏覽器如何查看 Shadow Dom 結構

若是咱們編寫以下的代碼：

<div>
        <input id="foo" type="range"/>
    </div>

    <div>
        <video src="https://www.w3school.com.cn/i/movie.ogg" controls="controls">
            your browser does not support the video tag
        </video>
    </div>

在頁面中渲染出以下的 UI：

一個滑塊（slider）以及一個視頻（video）元素。可是咱們會發現其實咱們並無編寫 input 的樣式，input渲染出來應該是一個輸入框纔對。可是寫 type 爲 range以後咱們就會看到一個滑塊的 UI 效果。以及視頻元素裏咱們沒有特殊處理播放按鈕，視頻時常，以及其餘的控制按鈕元素。

那這些元素是怎樣生成的呢？咱們打開 chrome 的 devtools 以後審查元素：

也沒有看到對應的元素以及 dom 結構。

其實這就是所謂的 Shadow Dom，瀏覽器隱藏了這一部分的實現。而且封裝了實現的細節，包括樣式部分也作了隔離。

那咱們如何可以查看這些元素的結構呢？在Chrome瀏覽器中打開開發者調試工具：

勾選如圖當中的 Show user agent shadow DOM。而後再去審查元素：

此時，咱們就可以看到如圖當中的 dom 結構啦！！！

後續會再深刻討論涉及到相應的 Shadow DOM知識點。