РЕДАКТИРОВАТЬ 1
@Дэнни (и все)
«Есть ли причина, по которой вам нужно быть независимым за пределами Компонента?»
Пожалуйста, позвольте мне объяснить вариант использования здесь. Мой пользовательский элемент ABC-TOGGLE не зависит от меток (хочет быть). Наличие или отсутствие тега LABEL полностью зависит от автора/вызвателя LightDOM моего компонента. Все, что я хочу/нужно сделать, это признать среду/окружение времени выполнения и соответствующим образом адаптироваться.
Так же, как ABC-TOGGLE не является частью HTML FORM, он будет соответствовать любой среде.
ИМХО (нет, это очевидно), щелчок по предоставленной пользователем ЭТИКЕТКЕ ДЛЯ моего веб-компонента ДОЛЖЕН генерировать событие щелчка по #disTick.
Если вы говорите, что это невозможно или спецификация это исключает, тогда ладно, оставьте ссылку. Иначе что мне слушать?
КОНЕЦ РЕДАКТИРОВАНИЯ 1
Как мне получить HTML-метку вызывающего абонента, окружающую мой пользовательский элемент, чтобы вставить события «щелчка» в мой теневой корень? Нет ли в ShadowRoot чего-то, что я мог бы прослушивать на предмет событий Click для моей метки LightDOM?
Я считаю, что этот ответ щелчок по меткам близок, но я наследую от HTMLElement.
В следующем коде я хочу, чтобы мой пользовательский элемент ABC-TOGGLE слышал события на метке «aLabel».
export class ABCToggle extends HTMLElement
{
static formAssociated = true;
Никакой радости (#toggle — элемент верхнего уровня): -
this.#shadowRoot.host.addEventListener('click', (e) => {
console.info("SR click");
});
this.#shadowRoot.addEventListener('click', (e) => {
console.info("SR click");
});
this.#toggle.addEventListener('click', (e) => {
Вызов HTML: -
<div id = "disableIt">
<label id = "aLabel" for = "disTick">Disable Toggle </label>
<div id = "tickContainer">
<abc-toggle id = "disTick" name = "disTick" checked = "false" tabindex=0 type = "tick"></abc-toggle>
</div>
</div>
фрагмент StackOverflow с минимальным воспроизводимым примером Он поможет читателям выполнить ваш код одним щелчком мыши. И помогите создавать ответы одним щелчком мыши. Спасибо.
Спасибо @richard Судя по этому коду, я должен быть в состоянии сказать это. #shadowRoot.host.addEventListener('click', (e) => { но все еще нет события :-( Я не мог видеть ручку кода (или другое) по этой ссылке. У вас есть такой? Хорошо, я вырежу и вставлю.
@richard, в этом примере нет теневого DOM. ПОЭТОМУ я предполагаю, что яблоки против апельсинов
Есть ли причина, по которой ваш <label>
должен быть независимым вне Компонента? Эта метка disTick может находиться в любом месте документа, в том числе скрыта в других теневых корнях. Таким образом, вам нужно установить некоторые границы, в которых вы ищете этот ярлык, или вам придется пойти ва-банк и рекурсивно погрузиться во весь DOM. Из точки зрения компонента, которая <label>
должна быть создана самим компонентом. (либо внутри, либо за пределами ShadowDOM)
@Danny'365CSI'Engelman, пожалуйста, смотрите РЕДАКТИРОВАТЬ 1
Вам все еще понадобится document.querySelector('[for = "disTick"]')
или что-то более необычное, чтобы найти этот ярлык.
См. строку № 140 в github.com/RichardMaher/CustElements/blob/main/test_toggle.html или строку № 116 в github.com/RichardMaher/CustElements/blob/main/toggle.js или ты имел в виду что-то другое?
Хорошо, на самом деле это не решение, а дополнительная информация, поэтому я уверен, что один из вас ее поймет!
Если вы зайдете на демо, вы увидите это, если нажмете НА ЭТИКЕТКУ.
<label for = "disTick">Disable Toggle </label>
затем я могу выбрать щелчок в своем пользовательском элементе наshadowRoot.host, но я не могу отличить щелчок по «disTick» от щелчка по его метке.
Думаю, я мог бы остановить распространение события CLICK в моем пользовательском элементе и создать собственное событие для различения, но все это становится беспорядочным :-(
Есть альтернативы?
РЕДАКТИРОВАТЬ 1
Ответ заключается в том, чтобы получить составленный путь для событияshadowRoot.host.onclick пользовательского элемента, и если element[0] не является this.#checkbox (в моем случае), тогда был нажат светлый ярлык DOM (или был выбран хост.click()). называется), так что я просто это.#toggle.click(). Я думаю
РЕДАКТИРОВАТЬ 2
Работает как шарм
this.#shadowRoot.host.addEventListener("click", (e) => {
if (e.composedPath()[0] != this.#checkbox)
this.#toggle.click();
});
Поможет ли это вам двигаться в правильном направлении? html.spec.whatwg.org/dev/…