Описание тега native-web-component
Собственные веб-компоненты - это многократно используемые клиентские элементы, созданные с использованием собственных HTML-шаблонов, настраиваемых элементов и теневой модели DOM, без необходимости использования сторонних библиотек компонентов.
2
ответа
Позднее "ручное" обновление элемента в сторону встроенного веб-компонента
У меня есть плагин jQuery (который я не хочу изменять), который динамически создает div, Кроме того, у меня есть веб-компонент scrollable-div, который является настраиваемым встроенным расширением от HTMLDivElement, Поскольку я не имею никакого конт…
24 июл '18 в 09:46
0
ответов
Создание настраиваемого поля ввода с веб-компонентами, добавляемыми через шаблон и настраиваемыми перед добавлением в DOM
Я пытаюсь создать собственное текстовое поле через веб-компоненты 'use strict'; class TextBox extends HTMLElement { constructor() { super(); var shadow = this.attachShadow({ mode: 'open' }); let textbox = document.createElement("input"); shadow.appe…
27 фев '19 в 09:13
1
ответ
Поддержка веб-компонента Tabulator Table
Я хотел бы использовать очень красивую таблицу javascript Tabulator ( http://tabulator.info/) в веб-компоненте. Тем не менее, похоже, что основной экземпляр Tabulator может быть создан только через HTML-селектор, например так: var table = new Tabula…
30 янв '19 в 23:35
1
ответ
Перемещение элемента из светлого DOM в ShadowDOM без отсоединения
Интересно, нахожусь ли я на правильном пути здесь Цель: необходимо убедиться, что все элементы попадают в shadowDOM Таким образом, созданный вручную HTML-файл <cardts-pile> <cardts-card>A</cardts-card> <cardts-card>B</card…
06 фев '19 в 20:52
1
ответ
Веб-компоненты вложенных слотов
Есть ли лучший способ передать слоты глубоко вложенным компонентам? index.html <outer-comp> <span slot=foo>Lorem ipsum</span> </outer-comp> внешний компонент: <inner-comp> <slot name=foo slot=foo></slot> <…
17 фев '18 в 14:31
0
ответов
Использование угловой двусторонней привязки с собственным веб-компонентом
Итак, у меня есть собственный веб-компонент, который я хочу использовать с Angular. Но я не хочу добавлять какой-либо угловой код в нативный компонент, так как я также хочу использовать его с другими фреймворками и с сырым JS. Это работает нормально…
06 июл '18 в 20:02
1
ответ
Стилизация потомка элемента в щелевом элементе
Можно ли выбрать элемент-потомок в элементе с прорезями? Пример как это: ::slotted(div p) { color: blue; } <div><p>test</p><div> Не работает
22 янв '18 в 20:09
2
ответа
Атрибут заголовка HTML не отображается в элементах shadow dom
Я создал свой собственный HTML-элемент с веб-компонентами. Добавляет кнопку в свой теневой корень. Но заголовок кнопки не отображается при наведении на нее курсора, хотя атрибут title установлен в элементе html. Я использую Windows 10 и Firefox верс…
10 мар '18 в 11:03
1
ответ
Установить обратный вызов нативного веб-компонента из Angular
У меня есть собственный веб-компонент с функцией обратного вызова "myCallback". <script> class MyComponent extends HTMLElement { constructor() { super(); this.myCallback = this.getAttribute("my-callback"); } connectedCallback() { this.innerHTM…
07 дек '18 в 06:59
2
ответа
Настраиваемая функция обратного вызова события веб-компонента в теге
class UioKey extends HTMLElement { ... eKey(){windows.alert('class eKey function')} } function eKey(){ eKey(){windows.alert('document eKey function')} <template id="uio-key-temp"> <div class="uio-key"> <div class="i" onclick="eKey()"…
27 фев '19 в 11:38
1
ответ
Почему мой веб-компонент CSS не отображается? Я не использую shadowDOM
У меня есть компонент Native V1, который не использует shadowDOM, поэтому я помещаю свой CSS в <head>, Но когда кто-то еще использует мой компонент, мой CSS больше не работает. Это происходит только в том случае, если их компонент использует s…
22 фев '18 в 21:46
3
ответа
Отличный способ узнать, есть ли у элемента или любого из его родительских элементов отображение: нет
Мне нужно найти очень эффективный способ выяснить, имеет ли пользовательский элемент или какой-либо из его родительских элементов display: none; Первый подход: checkVisible() { let parentNodes = []; let el = this; while (!!(el = el.parentNode)) { pa…
29 окт '18 в 14:10
1
ответ
Предел выбора слота в веб-компоненте
Слот хорош для создания многократно используемого веб-компонента, однако у него пока есть ограничение. то, с чем я столкнулся, является проблемой стиля. вы просто не можете определить стиль внутри компонента, даже вы знаете, какова будет структура в…
14 мар '18 в 02:19
2
ответа
Можно ли сохранить внутренний HTML пользовательского элемента?
Используя пользовательские элементы, я хотел бы стилизовать элементы внутри пользовательского элемента, но когда я определяю элемент, все, кроме shadow dom, исчезает. Как мне переместить контент из элемента в теневой домен? У меня уже есть элемент о…
12 фев '18 в 01:43
1
ответ
Элемент.shadowRoot в Firefox
Как мы можем обойти Element.shadowRoot в Firefox, так как он еще не доступен? Об Element.shadowRoot https://developer.mozilla.org/en-US/docs/Web/API/Element/shadowRoot
25 апр '18 в 18:19
1
ответ
Доступ к дочерним узлам пользовательских элементов?
Это может быть немного запутанным. Я пытаюсь получить доступ к innerHTML или childNodes из моего пользовательского элемента. Можно ли получить доступ к исходной структуре DOM из файла импорта веб-компонента? ДО прикрепить тень? В приведенном ниже пр…
12 апр '18 в 00:58
1
ответ
Отражение свойства и атрибута в пользовательском элементе HTMLInput в обоих направлениях в нативном JavaScript
У меня есть пользовательское поле ввода, которое наследуется от HTMLInputElement: class TB extends HTMLInputElement { static get observedAttributes() { return ['value']; } constructor() { super(); this.addEventListener("change", function (event) { t…
01 мар '19 в 12:40
1
ответ
Глобальный эффект CSS на элементе Shadow. Зачем?
Оба CSS (один в светлом доме и один в тени дома) влияют на тег. На имя и телефон влияют глобальные CSS и CSS Shadow Scope!!! ЗАЧЕМ????? Я не хочу этого Я ожидал, что на них влияет только CSS-область Sahdow, которая находится в области шаблона. Я хот…
16 июл '18 в 04:05
1
ответ
Какой элемент имеет слот?
Могу ли я использовать tr (строку таблицы) для именованного слота? И что произошло, когда я использовал tr в качестве запасного содержимого слота? как это: <x-table> <tr slot="x-row"> <td>data</td> <td>data</td> &…
21 апр '18 в 08:20
2
ответа
Расширить пользовательский элемент веб-компонентов v1
У меня есть собственный веб-компонент, <app-list> что я пытаюсь расширить в <calcs-list>, // app-list.html <script> window.customElements.define('app-list', class AppList extends HTMLElement { constructor() { super(); } } ); </s…
06 июн '18 в 17:56