Описание тега shadow-dom

Shadow DOM, a key part of Web Components, allows you to create component-based apps using a subtree of DOM elements maintained in isolation from the main DOM.
1 ответ

Надежный способ доступа к данным в Polymer (внутри dom-repeat / обработчика событий)

Мне нужно захватить данные из экземпляра, созданного <template is="dom-repeat"> в Polymer (v1.2.4), и я не уверен, что было бы самым безопасным способом сделать это, учитывая множество доступных теневых DOM (клиентский браузер может быть запол…
19 фев '16 в 13:30
3 ответа

Селен вебдрайвер (chromedriver) и доступ к теневой дом

Я тестирую новое приложение, которое использует shadow dom следующим образом: #shadow-root (open) <div class="th_filePicker"> <div class="th_fp_header"> <div class="th_fp_title" role="heading" aria-level="1" data-l10n-id="th_fp_title"…
0 ответов

Могу ли я добавить псевдоэлемент для метки бумажного ввода в Polymer?

То, что я пытаюсь сделать, это добавить звездочку (*) в конце этикетки бумажного ввода, если она имеет required учебный класс. В обычном CSS я могу использовать .required label::after {}, но как мне это сделать в полимере? Я знаю об использовании --…
1 ответ

webcomponents.js Shadow DOM: селектор хоста не работает в Safari и Firefox

Я попытался создать свой собственный веб-компонент с использованием полифилла с https://github.com/webcomponents/webcomponentsjs Вот мой код: им-list.html <template id="im-list-temp"> <style> :host { list-style-type: none; margin: 0; pad…
02 июн '15 в 14:57
1 ответ

Доступ к родительским элементам Shadow DOM с использованием дочерних элементов

Структура Shadow Dom: В приведенной выше структуре shadow dom мы можем получить доступ к отдельным элементам, используя селен и JavaScript, как показано ниже в chrome: В Firefox:// div [@ class = 'style-scope rock-tabs' и not(@hidden)]//div/span[сод…
29 дек '16 в 06:49
2 ответа

Динамически добавлять класс в веб-компоненты из JavaScript, используя classList

Как добавить динамические стили в теневой DOM index.html <!DOCTYPE html> <html> <head> <title>Document</title> <link rel="import" href="nav-component.html"> </head> <body> <app-nav></app-nav&g…
1 ответ

Поделиться стилем через веб-компоненты "одного типа"

Если я правильно понимаю, создание экземпляра веб-компонента можно описать как создание теневого корня и копирование разметки, например, из шаблона в него: var Template = document.querySelector('#myTemplate'); var TemplateClone = document.importNode…
3 ответа

Как выбрать вложенные элементы с помощью <content select = "">

В Chrome 44 я пытаюсь создать теневой DOM, который отображает определенный набор дочерних узлов теневого хоста.В следующем коде &lt;content select="a"&gt; часть выбирает только два из трех &lt;a&gt; элементы. &lt;div id=a&gt; &lt;a&gt;1&lt;/a&gt; &l…
1 ответ

Изменить SVG прямоугольный ход, который был размещен при использовании

Я работаю со svg-спрайтами и пытаюсь изменить свойство stroke в некоторых svg, которые были размещены с помощью функции use. Он помещает расширенный svg от ShadowRoot в DOM и выглядит как заблокированный от внешних правил CSS. Но я видел возможное р…
01 ноя '17 в 15:21
3 ответа

Доступ к DebugElement вложенного компонента при использовании инкапсуляции собственного представления

Я тестирую компонент, подобный следующему @Component({ selector: 'my-component', template: ` &lt;my-nested-component [state]="state"&gt;&lt;/my-nested-component&gt; `, encapsulation: ViewEncapsulation.Native }) export class MyComponent {} При модуль…
02 дек '16 в 09:39
1 ответ

Свойство объекта события перетаскивания полимера содержит родительский элемент srcElement.

Я создаю простое одностраничное приложение, используя Polymer. Я создал пользовательский элемент, который содержит демонстрацию Polymer-drag-drop. Действие перетаскивания и создания div отлично работает, свойство relatedTarget объекта события содерж…
1 ответ

Доступ к содержимому <content> в элементе Polymer

Мне нужно извлечь содержимое из &lt;content&gt; элемент. Мой пользовательский элемент называется следующим &lt;my-element&gt;Important text&lt;/my-element&gt; Итак, вопрос: как мне получить этот текст внутри моего полимерного элемента? Мой полимерны…
22 дек '14 в 21:19
1 ответ

Перемещение элемента из светлого DOM в ShadowDOM без отсоединения

Интересно, нахожусь ли я на правильном пути здесь Цель: необходимо убедиться, что все элементы попадают в shadowDOM Таким образом, созданный вручную HTML-файл &lt;cardts-pile&gt; &lt;cardts-card&gt;A&lt;/cardts-card&gt; &lt;cardts-card&gt;B&lt;/card…
0 ответов

Имеет ли::ng-deep стиль переопределения, определенный классами на уровне дочернего компонента Angular 4/5

Если я использую:host::deep button {...} и у одного или нескольких дочерних элементов есть класс, определяющий стили для кнопки, какой из них выигрывает?
01 дек '17 в 01:40
1 ответ

Тег<content> не отображается в зависимости от размещения в шаблоне

Я не уверен, что происходит, но содержимое в теге не отображается в зависимости от того, где находится элемент. Мой элемент в использовании: &lt;my-element&gt; &lt;p&gt;Hello There!&lt;/p&gt; &lt;/my-element&gt; По моему полимерный элемент: &lt;poly…
02 окт '13 в 18:27
1 ответ

JavaScript в лучших практиках Shadow DOM

У меня проблемы с настройкой JavaScript для правильной работы в Shadow DOM-элементах, которые я определяю. Учитывая следующий код: &lt;template id='testTemplate'&gt; &lt;div id='test'&gt;Click to say hi&lt;/div&gt; &lt;script&gt; var elem = document…
30 июл '14 в 23:00
1 ответ

Веб-компоненты вложенных слотов

Есть ли лучший способ передать слоты глубоко вложенным компонентам? index.html &lt;outer-comp&gt; &lt;span slot=foo&gt;Lorem ipsum&lt;/span&gt; &lt;/outer-comp&gt; внешний компонент: &lt;inner-comp&gt; &lt;slot name=foo slot=foo&gt;&lt;/slot&gt; &lt…
1 ответ

Инкапсуляция стилей Shadow DOM

Я хочу создать расширение Chrome, которое будет вставлять виджет в веб-страницу. Мой виджет должен иметь согласованный стиль при вставке на любую страницу. Афайк, лучший способ добиться этого - использовать Shadow DOM. Кажется, что по стилю Shadow D…
15 ноя '18 в 13:08
2 ответа

Shadow Root getElementsByClassName

Я использую LitElement для создания пользовательских веб-компонентов. Я довольно новичок в этом и решил попробовать сделать слайдшоу изображений. Я использовал слайд-шоу W3Schools в качестве справочного материала, изменяя его для работы в качестве L…
0 ответов

Тень ДОМА целую страницу. Каковы преимущества и недостатки?

В настоящее время я изучаю веб-компоненты и Shadow DOM, и первое, что пришло мне в голову, было: "похоже, это сломало бы мое расширение подсветки URL, если применять его слишком свободно". Мое понимание Shadow DOM является неполным, но если предпола…
02 авг '17 в 05:05