Хабр Курсы для всех
РЕКЛАМА
Практикум, Хекслет, SkyPro, авторские курсы — собрали всех и попросили скидки. Осталось выбрать!
Хабр доступен 24/7 благодаря поддержке друзей
Комментарии 28
На html5rocks есть демка shadow dom visualizer.
Простите за глупый вопрос (я не являюсь web разработчиком). А чем полезен Shadow DOM? Желательно с примером и поподробнее.
Например, вы написали часть 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 кода внутри виджетов, тогда это была бы полноценная альтернатива фреймам.
Из второго абзаца этого комментария надо сделать небольшую статью с примерами, а саму статью закопать. Простите, я понимаю, что вы, наверное, старались, но получилась какая-то академическая статья с тяжёлым языком, ещё и с мешаниной русских и английских слов. У вас рука отвалится, если вместо «shadow tree» напишете «теневое дерево»?
Некоторые события пропускаются через shadow boundary, некоторые нет. Исключение составляют mutation events — они вообще не должны возникать в shadow tree.Пушкин, с Далем в обнимку, вращаются в гробу.
Про шаблонизацию на клиенте уже есть статья: habrahabr.ru/post/152001
Но ее автор так и не осветил, что же такое shadow DOM.
Но ее автор так и не осветил, что же такое shadow DOM.
И вот здесь я не понимаю логики shadow DOM — почему нет инкапсуляции js кода внутри виджетов, тогда это была бы полноценная альтернатива фреймам.Не путайте инкапсуляцию и песочницу. Инкапсуляции js можно добиться средствами языка, и потому дополнительная поддержка со сторону shadow DOM не требуется.
С CSS же наоборот — единственный способ добиться инкапсуляции на данный момент — это уникальные для виджетов префиксы, что никак не назвать красивым решением.
Не путайте инкапсуляцию и песочницу. Инкапсуляции js можно добиться средствами языка, и потому дополнительная поддержка со сторону shadow DOM не требуется.
Но фреймы тоже не являются настоящей песочницей — дочерние фреймы (с учетом кроссдоменных особенностей, конечно) могут изменять содержимое родительского окна. Для инкапсуляции js, разумеется, можно написать специальный механизм, но было бы неплохо иметь это из коробки, разве нет?
С CSS я полностью согласен.
Инкапсуляции js можно добиться средствами языка
Например как?
Можно ведь менять и прототипы встроеных обьектов, удалять что угодно, перезатирать глобальные переменные, и извне никак это не отследить (по моему).
По CSS.
А как же параметр scoped?
А как же параметр scoped?
Откройте настройки WebTools и включите «Show Shadow DOM», теперь вы можете посмотреть как устроен Video Player "изнутри". Так же нужно помнить, что наружу из компонента видны только те события, которые вы пробросите и никто не сможет подписаться на какой-нибудь `change` у `input` внутри компонента.
Shadow DOM наконец-то дает возможность создания полноценных компонентов, единственное что в нем странно смотрится, так это «шаблонизация».
Shadow DOM наконец-то дает возможность создания полноценных компонентов, единственное что в нем странно смотрится, так это «шаблонизация».
На счет стилей это понятно. Но если я, например, подключу какую нибудь js либу внутри shadow DOM, она будет видна снаружы?
Тест некорректен, посмотрите API — это лучше тысячи слов :]
Чем-то похоже на XBL.
Глобальные стили, правда, там не отключить – можно только добавить «местные».
Жаль, в веб оно так и не пошло, а потом – так и вообще отключили по умолчанию вместе с remote XUL.
Глобальные стили, правда, там не отключить – можно только добавить «местные».
Жаль, в веб оно так и не пошло, а потом – так и вообще отключили по умолчанию вместе с remote XUL.
Кстати, toolkitchen — полифилл для веб-компонентов.
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Shadow DOM