static shadowRootOptions in Litelements with Typescript, set mode to open or close

Question

I'm currently diving into Webcomponents with Litelements: In Webcomponents you can change the way the shadowdom works by defining the mode property as 'open' or 'closed'. Like this in vanilla Javascript without LitElements:

Javascript:

var shadow = this.attachShadow({mode: 'open'});

from: https://developer.mozilla.org/en-US/docs/Web/API/Element/attachShadow

Now in Litelements with Typescript this is achieved like this:

Typescript:

export class MyWebcomponents extends LitElement {
  static shadowRootOptions = {...LitElement.shadowRootOptions, delegatesFocus: true};
}

from: https://lit.dev/docs/components/shadow-dom/

he simplest way to customize the render root is to set the shadowRootOptions static property. The default implementation of createRenderRoot passes shadowRootOptions as the options argument to attachShadow when creating the component's shadow root. It can be set to customize any options allowed in the ShadowRootInit dictionary, for example mode and delegatesFocus.

To be honest, I was not able to get this to work, I tried a lot of things, like this:

Typescript:

static shadowRootOptions = {...{mode: 'open'}, delegatesFocus: true}; 

The upper try gives me an error that I'm not correctly extending the class LitElement.

Typescript:

static shadowRootOptions = {mode: 'open', delegatesFocus: true};

Gives me silly errormessage only VS Code and Typescript can produce boils down to wrong class extensions as well.

Typescript:

static shadowRootOptions = {{mode: 'open'}, delegatesFocus: true};

The upper try gives me a message telling me that Im not extending correctly and also moans about syntax.

I then tried to find out what type LitElement.shadowRootOptions is and provide something similar, but then I got into a rabbit hole of raising more questions and find this simple oneliner even more obscure. ( Yes I did read into the the spread syntax, and I think I understand it, I also read this posts according spread syntax: I don't understand about spread syntax inside objects and Is it spread "syntax" or the spread "operator"? )

So for the sake of keeping this question simple:

Can anybody point me into the right direction on how I have to write the syntax so this does work? I just want to be able to set the mode to open or close in the way its ment to be set.

Thanks a lot!

Greetings

Alex

Answer 1

By default lit element is acting in mode open. So customLitElement.shadowRoot returns a shadow-root.

If you want to run it in closed mode set the options as follows:

 static shadowRootOptions = {...LitElement.shadowRootOptions, mode: 'closed', delegatesFocus: true};

<script type="module">
import {
  LitElement,
  html,
  css
} from "https://unpkg.com/lit-element/lit-element.js?module";

class ClosedEl extends LitElement {
 static shadowRootOptions = {...LitElement.shadowRootOptions, mode: 'closed', delegatesFocus: true};

 render() {
  return html`
      <h1>Example Closed</h1>
  `;
 }
}

class OpenedEl extends LitElement {

 render() {
  return html`
      <h1>Example Opened</h1>
  `;
 }
}

customElements.define("my-closed", ClosedEl);
customElements.define("my-opened", OpenedEl);

console.log(`ShadowRoot of closed El: ${document.getElementById('closed').shadowRoot}`);
console.log(`ShadowRoot of opened El: ${document.getElementById('opened').shadowRoot}`);

console.log(`Access to opened El: ${document.getElementById('opened').shadowRoot.innerHTML}`);
</script>
<my-closed id="closed"></my-closed>
<my-opened id="opened"></my-opened>

To proove, that a shadow dom is of course created, here a screenshot:

Answer 2

There are different ways to use a closed Shadow Root as the render root for a LitElement, but only one of them will allow you to get the full functionality of the LitElement.

The following code snippet shows the correct way (ClosedRoot) and the incorrect way (M̀isconfiguredRoot) to do it in JavaScript:

<script type="module">
import {
  LitElement,
  html,
  css
} from "https://unpkg.com/lit-element/lit-element.js?module";

class ClosedRoot extends LitElement {
 static shadowRootOptions = {mode: 'closed'};

 render() {
  return html`
      <h1>Example Closed</h1>
  `;
 }
 
 static styles = css`h1{background: green}`;
}

class NoRoot extends LitElement {
 createRenderRoot() {
    return this;
 } 

 render() {
  return html`
      <h1>Example Without Shadow</h1>
  `;
 }
 
 static styles = css`h1{background: green}`;
}

class OpenRoot extends LitElement {
 render() {
  return html`
      <h1>Example Opened</h1>
  `;
 }
 
 static styles = css`h1{background: green}`;
}

class MisconfiguredRoot extends LitElement {
 createRenderRoot() {
    return this.attachShadow({mode: 'closed'});
 } 

 render() {
  return html`
      <h1>Example Misconfigured Closed Shadow</h1>
  `;
 }
 
 static styles = css`h1{background: green}`;
}

customElements.define("closed-root", ClosedRoot);
customElements.define("no-root", NoRoot);
customElements.define("open-root", OpenRoot);
customElements.define("misconfigured-root", MisconfiguredRoot);

console.log(`Inaccessible closed shadow root: ${document.getElementById('closed').shadowRoot}`);
console.log(`Missing shadow root: ${document.getElementById('none').shadowRoot}`);
console.log(`Open shadow root: ${document.getElementById('open').shadowRoot}`);
</script>
<closed-root id="closed"></closed-root>
<no-root id="none"></no-root>
<open-root id="open"></open-root>
<misconfigured-root id="misconfigured"></misconfigured-root>

You can verify whether these custom elements have a Shadow DOM by inspecting them with your browser's debugging tools. The browser may also show you whether the Shadow Root is open or closed.

The Typescript compiler seems to infer the type {mode: string} for the static property shadowRootOptions, before checking whether it is compatible with the ShadowRootInit expected by the superclass LitElement. This certainly is one of the errors you might have stumbled upon. To solve this we should first try restricting the type of shadowRootOptions to the type we expect it to have. We thus add a type annotation:

static shadowRootOptions: ShadowRootInit = {mode: 'closed'};

Now the compiler knows that shadowRootOptions on your class is of the stricter type ShadowRootInit. The compiler can immediately check that 'closed' is of the type ShadowRootMode, and the compiler is happy.

Note that delegatesFocus: true is not necessary and instead modifies a different behaviour of the Shadow DOM.

Now as to why you usually shouldn't use MisconfiguredRoot, this is because it breaks some features of LitElement, such as styling using the static styles property, as shown above.

As for NoRoot, it does not create a Shadow Root at all, as evident by its missing styling and from inspecting it. There definitely are use cases for this, but you should be aware that it is completely different from a closed Shadow DOM, since you are losing all forms of encapsulation, be it style, DOM, or anything else.