Lit Element Constructor Injection- Inject parameters in the constructor of a lit element service from client app consuming lit element)

Question

I have created a simple lit element bundle file using rollup.config.js. This bundle file is uploaded in NetStorage. I want to inject a value from the client class (angular spa app’s component.ts file) that is consuming the CDN service and pass it to the CDN service. I am not sure if this is possible but here is what I am thinking:

So my lit element class looks something like this: 

import {customElement} from "lit/decorators.js";
import {LitElement} from "lit";

@customElement('my-lit-element')
export class MyLitElement extends LitElement {

 constructor() {
    super();

    console.log('this is test log');

    const config : String = '';

 // want config value to come from injection from client’s ts file
    if (config != null || config != '') {
      console.log('inside config');
      console.log('config', config)
    }
    console.log('test log');
  }


  /**
   * invoked when a component is added to the document's DOM
   */
  connectedCallback() {
    super.connectedCallback();
  }

    testMethod() {
      console.log('Hi from testMethod()');
    }

}

declare global {
  interface HTMLElementTagNameMap {
    'my-lit-element': MyLitElement;
  }
}

Consuming client app code could be something like this:  index.html: 

<script type="module" src="https://<www.path-to-my-cdn-file>/my-lit-element.js”></script>
<my-lit-element></my-lit-element>

in typescript.component.ts file: I want to be able to pass my the value of config to the MyLitElement’s service constructor. Want Client class to inject config as constructor injection like this:

export interface MyLitElement extends HTMLElement {
  testMethod():void;
}

declare global {
  interface HTMLElementTagNameMap {
    ‘my-lit-element’: MyLitElement;
  }
}

@Injectable()
export class ClientClass {

    el :any;

  constructor(
    @Inject(document.querySelector(‘my-lit-element')) private config: any
  ) {
     this.el = document.querySelector('my-lit-element');
    config = ‘SOME VALUE’;
     
  }
 
  }
}

This is just an idea of what I want to do and this is not working. Could anyone please help me in understanding how can I pass values as constructor arguments from client class to service class constructor.

Lit Element Constructor Injection- Inject parameters in the constructor of a lit element service from client app consuming lit element)

0 Answers0