Автор оригинала: Gerald Yerden.
У меня был разговор с коллегой парой дней назад о JavaScript и разных веб-каркасах. Он разговаривал со мной о реакции против угловых против VS Vue и продолжал использовать термин «тень DOM».
Контекст, в котором он приносил это, заставил меня поверить, что он подразумевает «виртуальный DOM», поэтому я поинтересовался, если он действительно хотел сказать «виртуальный дом» или «Shadow DOM». Его ответ заключался в том, что он думал, что они одинаковы. Это легкая ошибка, и оказалась зарабатывать на действительно хороший разговор.
Теперь, чтобы быть ясным, в этом посте я предполагаю, что вы понимаете, что является домом. Если нет, здесь это введение. После того, как вы дадите, вы увидите, что наша страница HTML сломана в древовидной структуре, которую мы как разработчики могут манипулировать.
Каркас, такие как React и Vue, создают абстракцию DOM, которое называется «виртуальным домом». Точка этой абстракции состоит в том, чтобы минимизировать изменения в фактическом доме, который может вызвать проблемы с производительностью.
Тень Дом – что-то другое. Shadow DOM – это структура под деревья, которая можно увидеть только от элемента, из которых происходит дерево. Давайте посмотрим на довольно стандартный HTML Doc …
Shadow DOM Example
То, что мы собираемся сделать, это проиллюстрировать, как тень DOM может использоваться путем создания пользовательского элемента. Мой сэв псевдоним является Devhulk, так как насчет мы создать Devhulk Element, который выглядит что-то подобное …
Я пойду вперед и свяжу полный код проекта ниже, чтобы вы могли попробовать его и играть вокруг. На данный момент нам понадобится класс, который расширяет HTMLELEMENT …
class DH extends HTMLElement {
constructor() {
let shadow = this.attatchShadow({mode: 'open'})
...
}
}
Это то, что мы бы использовали на нашем файле JavaScript JavaScript. Теперь я хотел подчеркнуть вышеуказанную одну строку кода, потому что это так легко прикрепить тень DOM на элементе.
Теперь, что мы собираемся сделать, это прикрепить другие элементы к тени, что только делается через обычный API DOM JavaScript. Удивительная часть вот в том, что, когда мы подтягиваем наш пользовательский элемент в браузере, элементы, которые мы добавили в Shadow DOM, не распознаются как обычные элементы DOM.
Может быть, вы начинаете посмотреть, как вы могли бы по-настоящему охватить стиль, используя Shadow DOM, вместо того, чтобы надо так много беспокоиться о названиях класса CSS и т. Д. Я бы поспорил, что это как Vue, а также вариант
class DH extends HTMLElement {
constructor() {
super()
let shadow = this.attachShadow({mode: 'open'})
// Create spans
let wrapper = document.createElement('span');
wrapper.setAttribute('class','wrapper');
let icon = document.createElement('span');
icon.setAttribute('class','icon');
icon.setAttribute('tabindex', 0);
let info = document.createElement('span');
info.setAttribute('class','info');
// Insert icon
let imgUrl;
if(this.hasAttribute('img')) {
imgUrl = this.getAttribute('img');
} else {
imgUrl = 'littlehulk.png';
}
let img = document.createElement('img');
img.src = imgUrl;
icon.appendChild(img);
var style = document.createElement('style');
style.textContent = `
.wrapper {
position: relative;
}
.info {
font-size: 0.8rem;
width: 200px;
display: inline-block;
border: 1px solid black;
padding: 10px;
background: white;
border-radius: 10px;
opacity: 0;
transition: 0.6s all;
position: absolute;
bottom: 20px;
left: 10px;
z-index: 3;
}
img {
width: 1.2rem;
}
.icon:hover + .info, .icon:focus + .info {
opacity: 1;
}`;
shadow.appendChild(style);
shadow.appendChild(wrapper);
wrapper.appendChild(icon);
wrapper.appendChild(info);
}
}
module.exports = DH
Теперь этот элемент не имеет большого практического использования, но это больше, чтобы проиллюстрировать концепцию. Давайте на самом деле создадим наш пользовательский элемент в нашем файле Main.js сейчас.
import DH from './dh.js'
customElements.define('dev-hulk', DH);
Теперь я могу построить и использовать свой пользовательский элемент
Shadow DOM Example
Если вы хотите скачать проект и запустить его самостоятельно, вам понадобится PM2 и WebPack.
git clone https://github.com/devhulk/shadow-dom.git cd shadow-dom npm i pm2 start pm2.json
Перейти к localhost: 3000 и посмотрите. Когда вы открываете инструменты DEV, вы увидите свой пользовательский элемент и rote-root root под его укрепленным стилем и элементами, которые вы определены.
Довольно круто! Надеюсь, это дало вам немного понимания того, что виртуальный дом против тени DOM. Я также надеюсь, что у вас есть некоторая стоимость из тени DOM пример, а его любопытство сохранить эксперименты.
Счастливое кодирование!