Light DOM children / slots (aka HTML Web Components) about wcc HOT 4 OPEN

We use Lit to build our editor, and due to the feature of rich text editors, we do not use shadow DOM. Lit is simply used as a way to encapsulate HTML (this seems to be referred to as light DOM, please correct me if I'm wrong). Recently, we are researching SSR for light DOM in order to render a read-only editing page in the browser (similar to Notion's public page). For speed and SEO purposes, we need to render light DOM on the server. Is this issue attempting to address this problem? Do you have any possible suggestions for our scenario?🙏

That's out project:
https://github.com/toeverything/blocksuite

You can click this link to know how we use lit:
https://try-blocksuite.vercel.app/starter?init

from wcc.

Hey @Flrande 👋

So just making sure I'm looking at the right thing, but if this is an example the what you are you referring to then yes, the createRenderRoot override will be bypass rendering into a Shadow DOM with Lit, and instead into the Light DOM. Unfortunately Lit does not support createRenderRoot for SSR use cases, and thus has no way to get just Light DOM out of a LitElement.

For WCC, it supports both because it is a bit more low-level than Lit and so the way you author your WebComponent will determine what WCC server renders out for you when running SSR.

So for this usage

<app-card
  title="Some Title"
  thumbnail="image.png"
/>
</app-card>

Light DOM Example

export default class Card extends HTMLElement {
  connectedCallback() {
    this.innerHTML = `
      <style>
        /* ideally you would use a global styling solution instead of an inline style tag */
      </style>
      <div>
        <h3>${title}</h3>
        <img src="${thumbnail}" alt="${title}" loading="lazy" width="100%">
      </div>
    `;
  }
}

customElements.define('app-card', Card);

Will output

<app-card>
  <style>
    /* ideally you would use a global styling solution instead of an inline style tag */
  </style>
  <div>
    <h3>Some Title</h3>
    <img src="image.png" alt="Some Title" loading="lazy" width="100%">
  </div>
</app-card>

(Declarative) Shadow DOM Example

export default class Card extends HTMLElement {

  connectedCallback() {
    if (!this.shadowRoot) {
      const thumbnail = this.getAttribute('thumbnail');
      const title = this.getAttribute('title');
      const template = document.createElement('template');

      template.innerHTML = `
        <style>
          /* ... */
        </style>
        <div>
          <h3>${title}</h3>
          <img src="${thumbnail}" alt="${title}" loading="lazy" width="100%">
        </div>
      `;
      this.attachShadow({ mode: 'open' });
      this.shadowRoot.appendChild(template.content.cloneNode(true));
    }
  }
}

customElements.define('app-card', Card);

Will output

<app-card>
  <template shadowrootmode="open">
    <style>
      /* ideally you would use a global styling solution instead of an inline style tag */
    </style>
    <div>
      <h3>Some Title</h3>
      <img src="image.png" alt="Some Title" loading="lazy" width="100%">
    </div>
  </template>
</app-card>

This particular feature is more around exploring a use case where providing content to a WC may be more ergonomic to do through HTML tags instead of attributes (in old AngularJS I think they called this transclusion, in React it would be props.children), while still having a JS "hook" to be able to wrap that nested content in HTML at SSR time so that wrapping HTML can include some sort of Tailwind or CSS Modules classes, and thus you can still have a component based development experience for templating and styling, even for more a content heavy website (blog post layouts, code snippet components, etc)

You can see my prototype here if you're interested - https://github.com/ProjectEvergreen/www.greenwoodjs.dev/pull/22/files

This is just for a solution aimed at Light DOM scenarios though, as if you were using Shadow DOM, then <slot> is the API for this, but it only works with Shadow DOM. 😢

Hope that helps and neat project! 🌟

from wcc.

Thank you for your response! It looks like we may need to try implementing our own SSR mechanism for Lit that supports light dom, as our components actually rely on many features of Lit that are not available in native Web Components, such as property-expressions.

https://github.com/toeverything/blocksuite/blob/66eac41b59a9f299be31a682754de753ffdf625f/packages/blocks/src/paragraph-block/paragraph-block.ts#L157-L169

from wcc.

@Flrande
Yeah, unfortunately that might be the case.

I think it would definitely be worth sharing your experience in that Discussion thread and / or joining their Discord and reaching out in their #ssr channel.

from wcc.