Referencing DOM elements from other files

[freshgrapes]

When trying to reference a DOM element on other files in PWA Starter Kit, what I have been doing is:

On file A (with the target DOM element called 'target'): <h2 id="target">YES</h2>

and then make a button on file A that changes the text like this: <button @click="${function(){changeTargetContent(this, "NO")}}>Say NO</button>

File B is a file that I use to store all of the common functions, and it has a function like this:

export function changeTargetContent(source, input) {

source.shadowRoot.getElementById("target").innerHTML = input;

}

This works perfectly, until I have to call 'changeTargetContent()' from files that is NOT file A (specifically, from loadPage() under 'src/actions/app.js' in PWA Starter Kit, in order to have changeTargetContent() to run once when file A is first loaded). The problem is that I cannot pass "this" (which represents something about file A) from app.js.

So to summarize, my question is: What does "this" represent on file A when I send changeTargetContent(this, "NO") so that file B can take the "this" as "source" in source.shadowRoot.getElementById("target").innerHTML = input;?

[LarsDenBakker]

this references the the current executing function or class instance.

It's best not to think in files, but in components. Also it's bad practice to pass dom element references around in functions, it quickly leads to a spaghetti of imperative dom manipulation and it breaks encapsulation of the component.

It is better to set a property on the component and update the DOM accordingly. The PWA starter kit, so from any place you can update the application's state which will trickle down to the correct components.

[freshgrapes]

Thank you @LarsDenBakker! This was very helpful!