Shadow DOM: что такое тень Dom и как редактировать что-то внутри него

Я прочитал много статей о теневой DOM, но не понял этого. Может Кто-нибудь скажет, что такое DOM DAM и как добавить его для кода ниже?Shadow 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

Чтобы добавить Shadow DOM в код, добавьте этот скрипт в конце вашего HTML файла:

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

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

Тень РОМ оказанной вместо исходного DOM дерева (так называемый Light DOM).

Вы также можете вставить содержание Light DOM в Shadow 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

Shadow DOM является всего лишь абстракция для DOM и CSS который не включен в DOM основного документа.

Один пример, где используется Shadow DOM в браузерах. При создании окна <input type="range" /> Chrome (или другой браузер с веб-браузером), вероятно, отобразит веб-компонент слайдера. Хотя этот слайдер не является частью 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

Shadow DOM: что такое тень Dom и как редактировать что-то внутри него

ответ

Смежные вопросы