Как прослушивать события LightDOM Label "FOR=" через пользовательский элемент ShadowDOM

РЕДАКТИРОВАТЬ 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&nbsp;</label>
    <div id = "tickContainer">
        <abc-toggle id = "disTick" name = "disTick" checked = "false" tabindex=0 type = "tick"></abc-toggle>
    </div>
</div>

Поможет ли это вам двигаться в правильном направлении? html.spec.whatwg.org/dev/…

Rickard Elimää 30.03.2024 10:23

фрагмент StackOverflow с минимальным воспроизводимым примером Он поможет читателям выполнить ваш код одним щелчком мыши. И помогите создавать ответы одним щелчком мыши. Спасибо.

Danny '365CSI' Engelman 30.03.2024 10:32

Спасибо @richard Судя по этому коду, я должен быть в состоянии сказать это. #shadowRoot.host.addEventListener('click', (e) => { но все еще нет события :-( Я не мог видеть ручку кода (или другое) по этой ссылке. У вас есть такой? Хорошо, я вырежу и вставлю.

McMurphy 30.03.2024 10:41

@richard, в этом примере нет теневого DOM. ПОЭТОМУ я предполагаю, что яблоки против апельсинов

McMurphy 30.03.2024 13:30

Есть ли причина, по которой ваш <label> должен быть независимым вне Компонента? Эта метка disTick может находиться в любом месте документа, в том числе скрыта в других теневых корнях. Таким образом, вам нужно установить некоторые границы, в которых вы ищете этот ярлык, или вам придется пойти ва-банк и рекурсивно погрузиться во весь DOM. Из точки зрения компонента, которая <label> должна быть создана самим компонентом. (либо внутри, либо за пределами ShadowDOM)

Danny '365CSI' Engelman 30.03.2024 17:10

@Danny'365CSI'Engelman, пожалуйста, смотрите РЕДАКТИРОВАТЬ 1

McMurphy 31.03.2024 00:54

Вам все еще понадобится document.querySelector('[for = "disTick"]') или что-то более необычное, чтобы найти этот ярлык.

Danny '365CSI' Engelman 31.03.2024 12:32

См. строку № 140 в github.com/RichardMaher/CustElements/blob/main/test_toggle.h‌​tml или строку № 116 в github.com/RichardMaher/CustElements/blob/main/toggle.js или ты имел в виду что-то другое?

McMurphy 01.04.2024 02:29
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
8
114
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Хорошо, на самом деле это не решение, а дополнительная информация, поэтому я уверен, что один из вас ее поймет!

Если вы зайдете на демо, вы увидите это, если нажмете НА ЭТИКЕТКУ.

<label for = "disTick">Disable Toggle&nbsp;</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();
    });

Другие вопросы по теме