Описание тега custom-element

Пользовательские элементы - это функция HTML, позволяющая создавать собственные полнофункциональные элементы DOM и использовать их в разметке HTML, таблицах стилей CSS и коде JavaScript.
2 ответа

Почему attributeChangedCallback вызывается дважды?

Я строю простой пользовательский элемент, используя пользовательские элементы polyfill. Я зарегистрировал атрибут для просмотра (используя observedAttributes()), и когда я изменяю значение этого атрибута, функция attributeChangedCallback называется …
18 янв '17 в 11:27
1 ответ

Очистка слушателей событий в пользовательских элементах

При регистрации слушателей событий в attachedCallbackэто моя ответственность, чтобы убедиться, что они будут удалены в detachedCallback? Как показано в минимальном примере ниже, шаблон довольно предсказуем, поэтому мне интересно, возможно, браузер у…
30 янв '16 в 10:23
2 ответа

Создать пользовательский элемент из полимера с помощью бумаги-списка с фильтром

Я хотел бы создать пользовательские элементы в Polymer, используя paper-listbox с фильтром (поиск). Начал с кода ниже. однако, что-то не так с этим кодом. Нужна помощь в этом <dom-module id="employee-list"> <template > <paper-input on…
29 фев '16 в 03:38
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 ответ

Как отличить нативный HTMLE-элемент от созданного / пользовательского?

Предположим, у меня есть следующий HTML-код: <header> <nav> <ul> <li>My first menu</li> <li>My second menu</li> </ul> </nav> <header> <main> <section> <h2>My title</h2&…
31 авг '15 в 12:56
1 ответ

Как стилизовать: корень на основе пользовательского атрибута элемента

Обновление: См.: Как стилизовать:root без! Важно, используя правильную специфику Разве это не возможно? Это правило стиля полностью игнорируется
03 сен '18 в 18:40
0 ответов

Использование mat-select в пользовательском элементе (веб-компонент) открывает параметры вне теневого DOM

При использовании элемента mat-select в моем пользовательском элементе параметры отображаются вне созданной теневой области в HTML, что означает, что параметры не отображаются прямо под элементом управления select. Насколько я понял, мне нужно устан…
09 янв '19 в 12:26
1 ответ

Почему входные данные внутри пользовательских элементов не отправляются вместе с формой?

Я играю с LitElement, пытаюсь сделать несколько простых пользовательских элементов. Это мой app.js: class MyInput extends LitElement { static get properties() { return { name: { type: String, reflect: true }, innerVal: { type: String } } } construct…
26 янв '19 в 19:09
1 ответ

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

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

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

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

Невозможно создать пользовательский элемент при расширении встроенного элемента в Chrome 54

Я не могу создать пользовательский элемент при расширении из встроенного элемента в Chrome 54. Насколько мне известно, эта функция поставляется. Есть что-то, чего мне не хватает? Возможно, эта часть спецификации v1 все еще в движении. <super-elem…
11 ответов

Допустимы ли пользовательские элементы HTML5?

Мне не удалось найти однозначного ответа на вопрос, являются ли пользовательские теги действительными в HTML5, например: <greeting>Hello!</greeting> Я ничего не нашел в спецификации так или иначе: http://dev.w3.org/html5/spec/single-page…
23 мар '12 в 18:59
1 ответ

Перераспределить повторяющиеся элементы слота во вложенной теневой DOM

Справочная информация: этот вопрос относится к разработке расширения для последних версий Chrome. Он опирается на функции javascript, такие как импорт HTML и пользовательские элементы, которые доступны не во всех браузерах, но это нормально для этог…
2 ответа

webcomponents - скрыть выпадающее меню на window.onclick

Выпадающее меню создано в shadowDOM почти идеально, но проблема в том, как скрыть выпадающее меню при нажатии на любое другое место в окне class NavComponent extends HTMLElement { constructor() { super(); let template = document.currentScript.ownerD…
2 ответа

Как добавить JavaScript в пользовательские элементы?

У меня есть следующий код, который создает пользовательский элемент, инкапсулированный с Shadow DOM: 'use strict' var proto = Object.create(HTMLElement.prototype); proto.createdCallback = function() { var root = this.createShadowRoot(); var divEl = …
1 ответ

Как реагировать на первую краску / макет после первоначального распределения слотов

У меня есть пользовательский элемент, my-el, который в своем шаблоне DOM (теневой корень) содержит slot элемент. На веб-странице я использую my-el помещая дополнительные элементы между тегами <my-el> </my-el> как показано ниже. <my-el…
18 янв '17 в 09:49
0 ответов

Угловой веб-элемент нельзя использовать без странных обходных путей в PWA

Мне был предоставлен пользовательский веб-элемент, созданный с использованием Angular 6 для использования в проекте, над которым я работаю. Он поставляется с простой HTML-страницей, показывающей работающий элемент: <custom-component></custo…
1 ответ

Как проксировать пользовательский элемент (веб-компонент)

class A extends HTMLElement { constructor() { super() return new Proxy(this, {}) } } class B extends A { constructor() { super() } } window.customElements.define('b-element', B) <b-element></b-element> Как я могу Proxy пользовательский …
0 ответов

Uncaught TypeError: недопустимый конструктор при расширении HTMLButtonElement

У меня есть следующий класс отсюда: class FancyButton extends HTMLButtonElement { constructor() { super(); // always call super() first in the ctor. this.addEventListener('click', e => this.drawRipple(e.offsetX, e.offsetY)); } // Material design …
08 фев '17 в 17:25
1 ответ

Экземпляр Webcomponent / custom-element прекращает анализ первого тега <script>

Используя Google Chrome (v42) и встроенную поддержку веб-компонентов, я пытаюсь использовать пользовательский элемент, где содержимое пользовательского элемента иногда содержит встроенные теги javascript. Тем не менее, парсер, кажется, перестает ана…