В чем разница между теневым DOM Полимера и теневым DOM?

Question

У меня проблемы с использованием теневого DOM для одного из веб-компонентов (paper-stepper), и вместо этого требуется использование теневого DOM. Я не уверен, в чем различия и почему это так.

Answer 1

Вот хорошее объяснение почему.

Tl; DR:

Shadow DOM:

Shadow DOM работает, скрывая деревья DOM с областями видимости от традиционных функций обхода деревьев и средств доступа (childNodes, children, firstChild и т. Д.). Эти средства доступа возвращают только элементы в вашей области видимости.

Это означает, что он скрывает от вас уровень сложности. Один из примеров, которые я нашел в Интернете, был о <video></video> тег. Это объясняет, как внутри него есть элементы управления видео, но они абстрагированы, и вы не можете их видеть. Это то, что делает Shadow DOM, но для всех веб-компонентов.

Shadow DOM звучит неплохо, но есть ограничения

• Это много кода.
• Медленно, чтобы косвенно использовать все API DOM.
• Структуры, подобные NodeList, просто не могут быть эмулированы.
• Существуют определенные методы доступа, которые нельзя перезаписать (например, window.document,window.document.body).
• Polyfill возвращает объекты, которые на самом деле не являются Nodes, но прокси Node, что может быть очень запутанным.

Вот тут и приходит теневой DOM.

Shady DOM:

Shady DOM - это сверхбыстрый Shim для теневого DOM, который обеспечивает сканирование дерева, но имеет недостатки. Самое главное, что нужно использовать тенистые API DOM для работы с деревьями области действия.

Используя Shady DOM, теперь у вас нет абстрактного представления компонентов. Вы можете видеть все. Однако с Shady DOM вы можете проверить, как будет выглядеть дерево, если бы вместо этого использовался Shadow DOM, выполнив следующее:

var arrayOfNodes = Polymer.dom(YOUR_SELECTOR_GOES_HERE).children;

Таким образом, принимая во внимание всю эту информацию о том, как работают разные DOM, кажется, что веб-компоненту paper-stepper для правильной работы необходим доступ ко всему дереву. Поскольку Shadow DOM абстрагирует внутренние элементы, вы должны использовать Shady DOM или реорганизовать код таким образом, чтобы к внутренним элементам не требовался доступ извне абстракции.