シャドウ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

：そうのようなあなたがShadow DOM APIを使用することができ、 "影" の要素を取り付けるために

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

HTMLファイルの末尾に、このスクリプトを追加し、あなたのコードにシャドウDOMを追加するには：

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

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

シャドウDOMが初期のDOMツリーの代わりにレンダリングされる（ライトDOMと呼ばれます）。

また<slot>要素の助けを借りて、シャドウDOMの光DOMのコンテンツを挿入することができます

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を使用する例の1つがブラウザにあります。 <input type="range" /> Chrome（または別のWebkit搭載のブラウザ）を作成すると、おそらくスライダのWebコンポーネントがレンダリングされます。このスライダはメインドキュメントのDOMの一部ではありませんが、ブラウザはシャドウDOMを利用してこれを表示します。

シャドウDOMは、プレゼンテーションがコードと異なる場合が多く、主にCSSからの漏れを防ぐために使用されます。多くの一般的なCSSフレームワークでこのパターンを見つけることができます。

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とは何かを編集する方法

答えて

関連する問題