stenciljs

<li> elements must be contained in a <ul> or <ol> in Stenciljs

I am trying to implement the following in an accessible manner:

<ul>
  <my-li>
    #shadow-root
    <li>
      <span>hello!</span>
    </li>
  </my-li>
</ul>

In Stenciljs classes decorated with @Component can not extend from a base class, therefore this method of customizing built-in elements is not applicable here.

Is there any way to set the type of a HTMLElement that is a Stenciljs component?

Solution

  • You can't. It is an HTML restriction.

    You could replace your whole <my-li> Web Component with its content:

    customElements.define("my-li",class extends HTMLElement {
  constructor(){
    super().attachShadow({mode:"open"}); // for demo, just showing shadowRoot is replaced
  }
  connectedCallback(){
    this.parent = this.parentNode;
    setTimeout(() => { // only if you need its innerHTML (and do not have a large DOM inside!)
      this.replaceWith(
        Object.assign(
          document.createElement("LI") , {
            id        : this.id,
            innerHTML : this.innerHTML
          }));
    });
  }
  disconnectedCallback(){
    console.log(this.parent.outerHTML);
  }
})
    <ul>
 <my-li id="FOO"><b>BAR</b></my-li>
</ul>