Deprecate `this.template` in favor of `this.shadowRoot`

[nolanlawson]

When LWC was first released, this.template made sense – it referred to the (shadow DOM) template. Today it roughly means the same thing as this.shadowRoot, since it is undefined for light DOM components. (E.g. developers have to remember do to this.querySelector() in light DOM and this.template.querySelector() in shadow DOM.)

As part of hewing closer to the standards, I believe we should deprecate this.template in favor of this.shadowRoot. If you access this.template you should get a warning, and eventually it should be removed.

[caridy]

the problem is that this.shadowRoot is null for closed mode. this is why we have a private field (template) that can always be around, even for closed shadows.

[nolanlawson]

@caridy In practice LWC almost always runs in open mode, but your point is well taken. In closed shadow environments, I think exposing ElementInternals somehow would make sense:

renderedCallback() {
  console.log(this.internals.shadowRoot) // or something. Maybe this.#internals
}

[caridy]

yeah, I suspect that will happen at some point. keep in mind that this.template predates the notion of internals.