is it ok to use a global reference for the components that are supposed to be at most 1 in the document for setting its properties?

Question

It's hard to get data between components if they have a bit complex structure. Yes there's a plenty of state management libraries out there. But I wonder what if all I need to do is just to set a different value for a component that I can't reach from where I want to set it.

for example, I have a tabs component (there will be only 1). I also added a button that sets a different tab but I can't reach my-tabs from it.

so can't I just

class MyTabs extends LitElement {
    static properties = {
        active: {}
    }
    constructor() {
        super()
        this.active = 0
        window.tabs = this
    }
}

class MyButton extends LitElement {
    render(){
        return html`
            <button @click=${e => window.tabs.active = 2}>back to tab 2</button>
        `
    }
}

It has a rule tho - 1 instance at most && you can't get. only to set cuz:

• when used get: you get the actual value but when an update occurs for my-tabs it won't update my-button leaving old data in display.
• when used set: the new value will be considered in my-tabs and rendered accordingly. nothing affected.

now I think about array of components being stored in a global array with onconnect/disconnected callbacks)

I know it's a big no-no for reusability but I build my project using lit and never plan to publish the components. most of them are already very specific for the project. so yeah, I know it's bad for reusability but what if I don't care about it. can it give some other side effects? or is it simply ok to? what about the array one? thanks in advance <3

Answer 1

I would consider using events instead.

If MyButton is a child of MyTabs, you can have MyButton dispatch it from itself with bubble and compose, and have MyTabs listen for it.

If they are siblings, then you may need to do it on some common parent, or window.

class MyButton extends LitElement {
    dispatchTabChange(tabIndex) {
      const event = new CustomEvent('tab-change', {detail: tabIndex});
      window.dispatch(event);
    }

    render() {
        return html`
            <button @click=${() => dispatchTabChange(2)}>back to tab 2</button>
        `
    }
}

class MyTabs extends LitElement {
    static properties = {
        active: {}
    }
    constructor() {
        super()
        this.active = 0
    }
    tabChangeListener(e) {
        this.active = e.detail;
    }
    connectedCallback() {
        window.addEventListener('tab-change', this.tabChangeListener);
    }
    disconnectedCallback() {
        window.removeEventListener('tab-change', this.tabChangeListener);
    }
}

Answer 2

It is your code, you can add as many globals, pigeons or telegraph poles to your code as you want.

Your HTML probably looks something like:

<my-tabs>
 shadowroot
  <my-tab id="tab1"></my-tab>
    shadowroot
      <button></button>
  <my-tab id="tab2"></my-tab>
    shadowroot
      <button></button>      
  <my-tab id="tab3"></my-tab>
    shadowroot
      <button></button>
</my-tabs>

"problem" with Lit is, by default it sticks a shadowDOM on every element.

That means you can't use the default .closest("my-tabs") to walk up the DOM

You can add a closestElement("my-tabs") method that crosses shadowroot boundaries issued from your <button>

  closestElement(selector, el = this) {
    return (
      (el && el != document && el != window && el.closest(selector)) ||
      this.closestElement(selector, el.getRootNode().host)
    );
  }

It might be easier to only keep ONE shadowDOM on <my-tabs> and non on <my-tab>; makes closest() work and styling a whole lot easier