Публикации по теме 'shadow-dom'
Как найти веб-элементы в теневых DOM с помощью Selenium WebDriver и C #
Проблема
Процесс поиска элементов на веб-странице, не использующей Shadow DOM, достаточно прост. Попытка найти элементы на веб-странице, которая действительно использует Shadow DOM, - это еще одна проблема!
Проблема в том, что библиотеки WebDriver изначально не поддерживают теневые элементы DOM из коробки, поэтому, если вы используете предоставленные вызовы функций для поиска элементов, они потерпят неудачу.
Пример веб-страницы
Типичным примером веб-страницы, используемой для..
Реактивная разметка с использованием ванильного Javascript
В эпоху динамического веб-контента появление Web 2.0 привело к появлению множества методов, направленных на то, чтобы сделать рендеринг веб-контента не только более быстрым, но и более эффективным и простым для автоматизации. Однако уровень абстракции, используемый для достижения этого, иногда может скрывать важные основы, которые делают возможными эти подвиги. Эта статья является попыткой раскрыть слои и изучить основные операции, лежащие в основе этих более сложных абстракций.
Весь..
Дом теней
Shadow DOM — это веб-стандарт, который позволяет инкапсулировать и определять область действия стилей и разметки в пределах определенного компонента или элемента, изолируя его от остальной части страницы. Он позволяет создавать многоразовые веб-компоненты с собственным деревом DOM, стилями CSS и поведением JavaScript. Инкапсулированные элементы и стили внутри теневого DOM скрыты от основного документа, что предотвращает вмешательство внешних стилей и скриптов.
то есть: допустим, я..
Вопросы по теме 'shadow-dom'
как использовать полимерные полифиллы вместе
Я пытаюсь использовать полифиллы Polymer для ShadowDOM и Пользовательские элементы
Если я использую их по отдельности, они работают хорошо, но когда я использую оба одновременно, я получаю такие ошибки
Uncaught TypeError: Cannot read...
1402 просмотров
schedule
17.09.2022
Полимерные элементы сторонних производителей
Я пытаюсь понять, создан ли полимер для конкретного варианта использования - сторонние веб-компоненты.
Что мне нужно сделать, так это создать веб-компонент, который принимает в качестве входных данных со страницы вызывающего абонента URL-адрес...
785 просмотров
schedule
06.03.2024
Polymer — innerHTML — можно ли применять стили родительского элемента?
Как вы, наверное, знаете, Polymer запрещает привязку unescapedHTML по многим разумным причинам.
Как внедрить HTML в шаблон с помощью полимера
Как отобразить html внутри шаблона?
Однако в моем проекте требовалось применять HTML из внешнего...
669 просмотров
schedule
11.11.2023
Как мы наблюдаем изменения распределения в теневом корне v0?
В теневых корнях v1 мы можем прослушивать slotchange на <slot> элементах, а затем использовать slot.assignedNodes() для обнаружения изменений. Я ищу способ сделать это с теневыми корнями v0.
Есть ли в ShadowDOM v0 способ наблюдать за...
302 просмотров
schedule
22.12.2023
Стиль Shadow DOM v1 с полифиллом
Я пытаюсь работать только с ShadowDOM v1 (без Polymer или других веб-компонентов), но не могу заставить стиль работать с полифиллом.
Специальные селекторы CSS :host и ::slotted не работают.
Я пробовал с разными polyfills , но, честное...
1030 просмотров
schedule
17.11.2022
Добавление элементов D3.js в теневой DOM полимерного элемента
Я работаю над проектом Polymer (v1), и один из моих пользовательских полимерных элементов должен содержать диаграмму D3 (v4). D3, похоже, довольно сильно работает с добавлением в DOM. К сожалению, Polymer кажется довольно строгим в отношении того,...
762 просмотров
schedule
18.05.2024
Кроссбраузерный импорт для шаблонов HTML
Я проверил, и здесь есть «похожие» вопросы, но я хочу исключить полифил Google для веб-компонентов, а также время прошло с момента большинства дискуссий 2015 года, и, что наиболее важно, модули Javascript, похоже, исключили себя из предоставления "...
492 просмотров
schedule
04.12.2022
Применить селектор CSS псевдоэлемента внутри теневого DOM
У меня есть Polymer 2 paper-input , который содержит дату:
<paper-input type="date"></paper-input>
Когда это отображает фактический <input> внутри теневого DOM для элемента управления.
Я хочу использовать селектор...
370 просмотров
schedule
07.06.2024
Ориентация на элемент Shadow DOM без нарушения прямой совместимости
Я пытаюсь настроить таргетинг на элемент Angular Shadow DOM, созданный мат-меню, например:
$google: #133700
.mat-menu-content {
background-color: $google;
}
Однако это не работает. Мне сказали, что селектор /deep CSS может помочь с...
80 просмотров
schedule
09.11.2022
Пользовательский элемент html, содержимое слота добавляется после # shadow-root
Я пытаюсь создать собственный элемент с помощью js. это мой пользовательский элемент
class ImageBackground extends HTMLElement {
createdCallback() {
let src = this.hasAttribute('src') ? this.getAttribute('src') : '/static/images/user.png'...
1085 просмотров
schedule
28.04.2024
CustomElements не работает в Firefox с включенными свойствами about:config
CanIuse говорит, что webcomponents v1 включен в Firefox v. 61 с about:config свойствами dom.webcomponents.customelements.enabled и dom.webcomponents.shadowdom.enabled установить на истину. И многие посты и статьи в сети согласны с этим....
651 просмотров
schedule
01.01.2024
Как установить высоту CKEditor 5
Использование углового компонента CKeditor Как установить высоту редактора?
Согласно документам, это можно сделать, установив стиль редактора на:
min-height: 500px !important;
Но это не работает!
8434 просмотров
schedule
26.09.2022
Выполнить скрипт в shadowRoot
Я пытаюсь использовать следующий код для выполнения скрипта из shadowRoot .
const template = document.createElement('template');
template.innerHTML = `<script>console.log("hey");</script>`;...
967 просмотров
schedule
22.11.2022
Как добавить несколько дочерних элементов в DOM и отобразить их, используя ванильный javascript?
Я пытаюсь вставить некоторые значки SVG в дом, но SVG (родительский узел) всегда заменяется на использование (дочерний узел). Кто-нибудь поможет мне разобраться?
Исходный код Изображение здесь
Кодировать здесь
const icons = [...
2720 просмотров
schedule
24.09.2022
как разрешить light dom css применяться к элементам shadow dom?
Я определяю свои собственные настраиваемые элементы и считаю удобным добавлять его дочерние элементы в теневой дом, в основном потому, что я могу это сделать в конструкторе настраиваемых элементов, в то время как тот же конструктор не позволяет мне...
1215 просмотров
schedule
24.03.2024
Angular — как получить доступ к элементу html при использовании ViewEncapsulation.Native
У меня возникла проблема, когда я получаю следующую ошибку при попытке доступа к элементу html по идентификатору. Я пытаюсь получить доступ к classList, когда пользователь нажимает кнопку, чтобы применить к элементу другой класс стиля. Список...
1270 просмотров
schedule
18.11.2022
Как лучше всего инкапсулировать приложение React?
Я пытаюсь инкапсулировать приложение React в Shadow Root веб-компонента или iFrame , чтобы создать виджет для чат-бот-мессенджер, такой как виджет Intercom.
Я использую:
React 16.8.6
Typescript 3.5.3
Redux 4.0.4
Styled-components 4.3.2...
451 просмотров
schedule
06.10.2022
Как нажать кнопку внутри тени Cypress.io
Я использую cypress.io, и мне нужно нажать кнопку внутри теневого корня.
Мне нужно нажать кнопку Да.
Как я могу это сделать?
395 просмотров
schedule
23.03.2024
