Replacing a custom element with its contents

[revosw]

If an element <my-header> looks like this:

render() {
  html`
    <span>A</span>
    <h1>What does the dot product represent?</h1>
  `
}

I want to replace the definition:

<div>
  <my-header></my-header>
</div>

With its contents:

<div>
  <span>A</span>
  <h1>What does the dot product represent?</h1>
</div>

In the React world, there are React fragments. This lets you return multiple nodes without a parent.

return (
  <>
    <span>A</span>
    <h1>What does the dot product represent?</h1>
  </>
)

Does lit have something like it?

The closest I can find in lit is to use the connectedCallback like this:

// If there is no shadow DOM
connectedCallback() {
  super.connectedCallback()
  setTimeout(() => this.outerHTML = this.innerHTML, 0)
}

// If there is shadow DOM
connectedCallback() {
  super.connectedCallback()
  setTimeout(() => {
    while(this.childNodes.length) {
      //Some wizardry that places all children of this shadow root up to the same level as the parent
    }
  },0)
}

How will such a solution affect <slot>?

[justinfagnani]

In Lit you would just use a template instead of a component.

The rest of the questions are not Lit-specific, but web components related. In general you shouldn't be replacing your self with content because the host element belongs to the outer element and you shouldn't modify the outer element's DOM. That's mostly a concern with reusable / maximally interoperable components and might not apply to app-specific components.

Why do you want to replace a component with it's content?

[revosw]

Why do you want to replace a component with it's content?

So I'm using tailwind, which I admit after a while goes against everything shadow DOM has to offer. Though I've given up Lit for now, I'll share what I was thinking.

In my design, each heading consists of two components. They're all part of a grid

<span class="question-tab">A</span>
<h1 class="question-text">
  Calculate the magnitude of the position vector $p$ for point $P(4,5,6)$
</h1>

I tried to make a component that combines them.

<question-header-tabbed tab="A">
  Calculate the magnitude of the position vector $p$ for point $P(4,5,6)$
</question-header-tabbed>

But since <question-header-tabbed> is a parent, the design breaks. So I tried separating the two:

<question-tab>A</question-tab>
<question-text>
  Calculate the magnitude of the position vector $p$ for point $P(4,5,6)$
</question-text>

And by now I started questioning whether that was really any beneficial compared to:

<span class="question-tab">A</span>
<h1 class="question-text">
  Calculate the magnitude of the position vector $p$ for point $P(4,5,6)$
</h1>

If I hadn't used tailwind, there would of course be the benefit of style encapsulation. But since I'm fighting it, I've found Lit is not the right tool for the job.

[justinfagnani]

Ok, well if something similar comes up again you can use :host {display: contents;} and expose the two elements in the shadow root as shadow parts and then they should be able to participate in the outer grid.