Create component without shadow dom

[nojaf]

Hello, I'd like to create a webcomponent that doesn't have a shadow dom. In pure Lit I can do something like:

export class GreenCategory extends LitElement {

    static properties = {
      tooltip: {type: String},
    };

    createRenderRoot() {
      return this;
    } 
    constructor() {
      super();
      this.tooltip = 'This setting is good to use';
    }

    render() {
      return html`<i class="bi bi-check-circle-fill green-recommendation" data-bs-toggle="tooltip" data-bs-custom-class="green-tooltip" data-bs-title="${this.tooltip}"></i>`;
    }
  }

The

    createRenderRoot() {
      return this;
    } 

will prevent a shadow dom from being created. (ref: https://lit.dev/docs/components/shadow-dom/#implementing-createrenderroot)

Can I do something similar in haunted?

[nojaf]

Ok, silly me, I just found that you can do this:

component(GreenCategory , { useShadowDOM: false})

Would you accept a PR to add this somewhere in the documentation?

[cristinecula]

@nojaf It's in the docs now: https://hauntedhooks.netlify.app/docs/guides/getting-started/#use

[nojaf]

Thanks!