Re: [WICG/webcomponents] HTML Modules: JavaScript Scoping of ShadowDom Children (Issue #959)

@Swivelgames in your case you can just do `this.getRootNode().host.showLoadingSpinner()`.

My use case was `ButtonComponent.onButtonClick(this: HtmlButtonElement)` which is a static function. But yeah, it makes more sense to use a method since JS will add it to the prototype *once* anyway (wasn't sure when I wrote that).

With events `this` is always the element the listener is attached to, which is the same as `event.currentTarget`. Also, in that inline code (`event`) is available in the scope, even if you never declared it.

Given any ShadowDOM element, you can get the ShadowRoot of the Web Component in question with `this.getRootNode()`. After that you can now get the ShadowRoot's host element with `.host`.

If you want to access the Web Component's static fields, you access `.constructor`. But if you want to access the prototype (class fields), `.host` would suffice.

Still, I don't recommend cloning templates like that. I moved to setting up a list of events to be bound on `constructor()`. There's no clear way to not iterate all the event listeners related to your ShadowRoot tree while having all instances share bind to the same function. It's either iterate or browser built anonymous functions.


-- 
Reply to this email directly or view it on GitHub:
https://github.com/WICG/webcomponents/issues/959#issuecomment-1367015535
You are receiving this because you are subscribed to this thread.

Message ID: <WICG/webcomponents/issues/959/1367015535@github.com>