Я слышал о теневой DOM, который, похоже, решает проблему инкапсуляции в разработке веб-виджета. Правила DOM и CSS инкапсулируются, что хорошо для обслуживания. Но разве это не то, для чего нужны iframes? Какие проблемы существуют с iframes, которые заставили W3C придумать веб-компоненты Shadow DOM или HTML5?
Почему Shadow DOM, когда у нас есть iframes?
Ответ 1
iframe используются как объекты инкапсуляции...
за исключением SVG (подробнее об этом позже), сегодняшняя веб-платформа предлагает только один встроенный механизм для выделения одного фрагмента кода из другой - и это довольно красиво. Да, я говорю об iframes. Для большинство требований к инкапсуляции, фреймы слишком тяжелые и ограничительные.
Shadow DOM позволяет вам обеспечить лучшую и удобную инкапсуляцию, создав еще один клон DOM или его часть.
Например, представьте, что вы создаете виджет (как и я), который используется на веб-сайтах. Виджет может быть затронут css на странице и выглядит ужасно, тогда как с Shadow DOM это не будет:)
Вот отличная статья по теме:
Ответ 2
Сегодня фреймы обычно используются для обеспечения отдельной области и стиля. Примеры включают Google map и видео на YouTube.
Однако iframe предназначены для встраивания еще одного полного документа в текущий HTML-документ. Это означает, что доступ к значениям в данном элементе DOM в iframe из родительского документа является сложным по дизайну. Элементы DOM находятся в совершенно отдельном контексте, поэтому вам нужно пройти через DOM iframes, чтобы получить доступ к значениям, которые вы ищете. Сравните это с веб-компонентами, которые предлагают элегантный способ выставить чистый API для доступа к значениям настраиваемых элементов.
Представьте себе создание страницы с использованием набора из 5 фреймов, каждый из которых содержит один компонент. Каждому компоненту нужен отдельный URL-адрес для размещения содержимого iframes. Полученная разметка будет завалена тегами iframe, что даст разметку с низким смысловым значением, что также неудобно читать и управлять. Напротив, веб-компоненты поддерживают декларирование богатых семантических тегов для каждого компонента. Эти теги работают как люди первого класса в HTML. Это помогает читателю (другими словами, разработчику обслуживания).
Таким образом, хотя оба фрейма и теневая DOM обеспечивают инкапсуляцию, только теневая DOM была разработана для использования с веб-компонентами и, таким образом, позволяет избежать чрезмерного разделения, накладных расходов на установку и неуклюжей разметки, которая возникает с iframes.