Be homogenous to traverse the parent DOM between shadow dom and `lwc:render-mode="light"` mode about lwc HOT 6 CLOSED

@rochejul Why do you need access to the host element itself? Is there a specific property that you need that is not being exposed?

(In general, this is supposed to behave "close enough" to the actual HTMLElement object, although in practice the proxying does not perfectly emulate it.)

from lwc.

Hi @nolanlawson
Well, I would like at least to have the same similarity between this.template?.host in shadow mode and this in light mode.

For example, in shadow mode, I am able to inspect the parent dom and then to ensure I am in the "right place" (I want to ensure to be used only with some components, without using private events which are not really private). In light mode, I cannot inspect the parent dom (the parentElement or parentNode are omitted). So at the end, we have some gaps between the two mode

from lwc.

@rochejul The fact that this does not give you a real HTMLElement is a legacy behavior of LWC (mostly due to Locker and lack of JS private properties at the time).

Since it might be a while before we can fix that, maybe something like this.selfAsElement or this.elementSelf would solve your use case?

renderedCallback() {
  console.log(this); // LWC's shim that emulates the `HTMLElement`
  console.log(this.elementSelf); // the actual `HTMLElement`, in both shadow and light DOM
}

from lwc.

from lwc.

Marking as up-for-grabs since I think this should be pretty uncontroversial. We already expose it; this would just be formalizing what we expose.

Feature summary:

As a component author, I want to be able to access the real HTMLElement of my LightningElement from within one of its callbacks (e.g. renderedCallback), consistently in both shadow DOM and light DOM.

Solution: let's add this.elementSelf as a new property on LightningElement. You can look to the implementation of tagName for an example of how to do this: #3642

Unlike the recent this.style PR (#4044), I don't think we need API versioning for this. elementSelf is such an uncommon property name that I doubt anyone is squatting it.

from lwc.

Hi @nolanlawson
I created this PR if you are interested: #4259

Please let me know if I could help more

Many thanks for your help

from lwc.