Shadow DOM: was ist Schatten Dom und wie man etwas in ihm bearbeiten

Ich habe viele Artikel über Schatten DOM gelesen, aber nicht klar darüber. Kann jemand sagen, was Schatten-DOM ist und wie man einen für den unteren Code hinzufügen?Shadow DOM: was ist Schatten Dom und wie man etwas in ihm bearbeiten

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

Quelle

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

Um einen Schatten DOM, um Ihren Code hinzufügen, um dieses Skript fügen Sie am Ende der HTML-Datei:

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

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

The Shadow DOM anstelle des ursprünglichen DOM-Baum wiedergegeben wird (das Licht DOM genannt).

Sie auch Inhalt des Lichts DOM im Schatten DOM mit Hilfe von <slot> Elemente einfügen können:

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>

Quelle

2017-02-14 08:45:22 Supersharp

Schatten DOM nur eine Abstraktion für DOM und CSS welches nicht im DOM des Hauptdokuments enthalten ist.

Ein Beispiel, wo Schatten DOM verwendet wird, ist in Browsern. Wenn Sie einen <input type="range" /> Chrome (oder einen anderen Webkit-basierten Browser) erstellen, wird wahrscheinlich eine Slider-Webkomponente gerendert. Obwohl dieser Schieberegler nicht zum DOM des Hauptdokuments gehört, nutzt der Browser das Shadow-DOM, um dies anzuzeigen.

Schatten DOM ist stark in den Fällen verwendet, in denen die Darstellung von dem Code unterscheiden, hauptsächlich für CSS verhindert in die Hauptkomponente austritt. Sie finden dieses Muster in vielen gängigen CSS-Frameworks.

Um einen "Schatten" Element befestigen können Sie die Shadow DOM API verwenden, etwa so:

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

Quelle

2017-02-14 08:45:38 gkats

Shadow DOM: was ist Schatten Dom und wie man etwas in ihm bearbeiten

Antwort

Verwandte Themen