影子DOM：什麼是影子Dom和如何編輯其中的東西

我讀過很多關於影子DOM的文章，但不清楚這一點。誰可以告訴什麼是影子DOM，以及如何爲下面的代碼添加一個？影子DOM：什麼是影子Dom和如何編輯其中的東西

<html> 
    <head></head> 
    <body> 
    <div id="box"></div> 
    </body> 
</html>

來源

2017-02-14 marko volly

https://developers.google.com/web/fundamentals/getting-started/primers/shadowdom – Andreas

http://stackoverflow.com/documentation/web-component/8239/getting-started-with-web-component/26500/shadow-dom-hello-world#t=201702140841345786364 – Supersharp

將陰影DOM添加到您的代碼，在你的HTML文件的末尾添加此腳本：

<script> 
    //create a Shadow DOM 
    var shadowRoot = box.attachShadow({ mode: 'open' }) 

    //add some content 
    shadowRoot.innerHTML = 'RTFM!' 
</script>

影子DOM代替呈現初始DOM樹（被稱爲光DOM ）。

您還可以插入在影子DOM輕DOM的內容與<slot>元素的幫助：

function add() { 
 
    box.attachShadow({ mode: 'open' }) 
 
    .innerHTML = ` 
 
     <style> 
 
     ::slotted(span) { 
 
      color: blue ; 
 
      font-style: italic ; 
 
      outline: none !important ; 
 
      min-width: 0 !important; 
 
     } 
 
     </style> 
 
     Hello <slot name="Name"></slot>!` 
 
}

#box [contenteditable] { 
 
    outline: 1px solid lightgray ; 
 
    display: inline-block ; 
 
    min-width: 50px ; 
 
}

<div id=box> 
 
    Type your name: 
 
    <span slot="Name" contenteditable>Mickey</span> 
 
    <br><button onclick="add()">Add Shadow</button> 
 
</div>

來源

2017-02-14 08:45:22 Supersharp

影子DOM只是爲DOM和CSS的抽象它不包含在主文檔的DOM中。

使用Shadow DOM的一個示例是在瀏覽器中。當您創建<input type="range" /> Chrome（或其他Webkit驅動的瀏覽器）可能會呈現滑塊Web組件。雖然此滑塊不是主文檔DOM的一部分，但瀏覽器會利用Shadow DOM來顯示此內容。

在演示文稿可能與代碼不同的情況下，Shadow DOM被大量使用，主要用於防止CSS泄漏到主要組件中。您可以在許多流行的CSS框架中找到這種模式。

爲了安裝一個「影子」的元素，你可以使用Shadow DOM API，就像這樣：

var shadow = document.querySelector('#box').attachShadow({ 
    mode: 'open' 
}); 
shadow.innerHTML = '<p>A box in the shadows</p>';

來源

2017-02-14 08:45:38 gkats

影子DOM：什麼是影子Dom和如何編輯其中的東西

回答

相關問題