Comments 28
На html5rocks есть демка shadow dom visualizer.
+2
Простите за глупый вопрос (я не являюсь web разработчиком). А чем полезен Shadow DOM? Желательно с примером и поподробнее.
+13
Например, вы написали часть html кода (виджет), которую хотите использовать на нескольких страницах, причем так, чтобы стили этой страницы никак не влияли на визуальное оформление виджета, тогда вы создаете shadow tree и выставляете у него resetStyleInheritance в true.
Либо, как при использовании связки xml + xslt, у вас есть некоторое дерево нод с данными, и используя shadow DOM и insertion points в нем вы можете оперировать с этими нодами из виджета как захотите.
То есть основная фишка — это создание шаблонизации на клиенте. Но без «инкапсуляции» в DOM применяемые шаблоны могут воздействовать друг на друга (например, применение стили из других шаблонов), вот shadow DOM позволяет использовать шаблоны без оглядки на используемые на странице и во всех ее фрагментах стили.
И вот здесь я не понимаю логики shadow DOM — почему нет инкапсуляции js кода внутри виджетов, тогда это была бы полноценная альтернатива фреймам.
Либо, как при использовании связки xml + xslt, у вас есть некоторое дерево нод с данными, и используя shadow DOM и insertion points в нем вы можете оперировать с этими нодами из виджета как захотите.
То есть основная фишка — это создание шаблонизации на клиенте. Но без «инкапсуляции» в DOM применяемые шаблоны могут воздействовать друг на друга (например, применение стили из других шаблонов), вот shadow DOM позволяет использовать шаблоны без оглядки на используемые на странице и во всех ее фрагментах стили.
И вот здесь я не понимаю логики shadow DOM — почему нет инкапсуляции js кода внутри виджетов, тогда это была бы полноценная альтернатива фреймам.
+5
Из второго абзаца этого комментария надо сделать небольшую статью с примерами, а саму статью закопать. Простите, я понимаю, что вы, наверное, старались, но получилась какая-то академическая статья с тяжёлым языком, ещё и с мешаниной русских и английских слов. У вас рука отвалится, если вместо «shadow tree» напишете «теневое дерево»?
Некоторые события пропускаются через shadow boundary, некоторые нет. Исключение составляют mutation events — они вообще не должны возникать в shadow tree.Пушкин, с Далем в обнимку, вращаются в гробу.
+9
Про шаблонизацию на клиенте уже есть статья: habrahabr.ru/post/152001
Но ее автор так и не осветил, что же такое shadow DOM.
Но ее автор так и не осветил, что же такое shadow DOM.
0
И вот здесь я не понимаю логики shadow DOM — почему нет инкапсуляции js кода внутри виджетов, тогда это была бы полноценная альтернатива фреймам.Не путайте инкапсуляцию и песочницу. Инкапсуляции js можно добиться средствами языка, и потому дополнительная поддержка со сторону shadow DOM не требуется.
С CSS же наоборот — единственный способ добиться инкапсуляции на данный момент — это уникальные для виджетов префиксы, что никак не назвать красивым решением.
0
Не путайте инкапсуляцию и песочницу. Инкапсуляции js можно добиться средствами языка, и потому дополнительная поддержка со сторону shadow DOM не требуется.
Но фреймы тоже не являются настоящей песочницей — дочерние фреймы (с учетом кроссдоменных особенностей, конечно) могут изменять содержимое родительского окна. Для инкапсуляции js, разумеется, можно написать специальный механизм, но было бы неплохо иметь это из коробки, разве нет?
С CSS я полностью согласен.
0
Инкапсуляции js можно добиться средствами языка
Например как?
Можно ведь менять и прототипы встроеных обьектов, удалять что угодно, перезатирать глобальные переменные, и извне никак это не отследить (по моему).
0
По CSS.
А как же параметр scoped?
А как же параметр scoped?
+1
Откройте настройки WebTools и включите «Show Shadow DOM», теперь вы можете посмотреть как устроен Video Player "изнутри". Так же нужно помнить, что наружу из компонента видны только те события, которые вы пробросите и никто не сможет подписаться на какой-нибудь `change` у `input` внутри компонента.
Shadow DOM наконец-то дает возможность создания полноценных компонентов, единственное что в нем странно смотрится, так это «шаблонизация».
Shadow DOM наконец-то дает возможность создания полноценных компонентов, единственное что в нем странно смотрится, так это «шаблонизация».
+2
На счет стилей это понятно. Но если я, например, подключу какую нибудь js либу внутри shadow DOM, она будет видна снаружы?
0
UFO just landed and posted this here
UFO just landed and posted this here
Чем-то похоже на XBL.
Глобальные стили, правда, там не отключить – можно только добавить «местные».
Жаль, в веб оно так и не пошло, а потом – так и вообще отключили по умолчанию вместе с remote XUL.
Глобальные стили, правда, там не отключить – можно только добавить «местные».
Жаль, в веб оно так и не пошло, а потом – так и вообще отключили по умолчанию вместе с remote XUL.
0
Кстати, toolkitchen — полифилл для веб-компонентов.
0
Sign up to leave a comment.
Shadow DOM