How to listen for LightDOM Label "FOR=" events via ShadowDOM Custom Element

57 views Asked by At

EDIT 1

@Danny (and everyone)

"Is there a reason your needs to be independent outside the Component? "

Please let me explain the use-case here. My custom-element ABC-TOGGLE is (wants to be) Label agnostic. Whether or not a LABEL tag is present is completely at the disgression of the LightDOM author/caller of my component. All I want/need to do is acknowledge the runtime environment/ambience and adapt accordingly.

Just as ABC-TOGGLE is agnostic to being part of a HTML FORM, yet will comply with either environment.

IMHO, (nah it's bleeding obvious) a click on a user-supplied LABEL FOR my Web Component MUST generate a click-event on #disTick.

If you are saying this is impossible or the specification rules it out then fine, please post link. Otherwise, what do I listen on?

END EDIT 1

How do I get a caller's HTML "Label" surrounding my Custom Element to bubble its "click" events to my shadow root? Is there not something in the shadowRoot that I can listen for Click events for my LightDOM label?

I believe this clicking labels answer comes close but I am inheriting from HTMLElement.

In the following code I want my ABC-TOGGLE custom element to hear events on label "aLabel".

export class ABCToggle extends HTMLElement 
{
    static formAssociated = true;

No joy (#toggle is the top level element): -

    this.#shadowRoot.host.addEventListener('click', (e) => {
        console.log("SR click");
    });
        
    this.#shadowRoot.addEventListener('click', (e) => {
        console.log("SR click");
    });
    this.#toggle.addEventListener('click', (e) => {             

Calling 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>
0

There are 0 answers