Comments (4)
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
![image](https://private-user-images.githubusercontent.com/50035259/321861826-31df7f6c-922c-4c24-96fb-6d4d4bbdde5d.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjUwNjgyNDIsIm5iZiI6MTcyNTA2Nzk0MiwicGF0aCI6Ii81MDAzNTI1OS8zMjE4NjE4MjYtMzFkZjdmNmMtOTIyYy00YzI0LTk2ZmItNmQ0ZDRiYmRkZTVkLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA4MzElMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwODMxVDAxMzIyMlomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWE4MmFiYjU2MjAzZTZhNzlmYTIyMjFhODkyZDQ1NjZjYzgyMWRkMzgwMDM4ZTVhMDI1ODY3NzNkNTIzZjMyNWEmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.hQmP_YHy0LE_l0sd3nH8OdI-pCZWdaxrG18yEvtZmkU)
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.
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.
Related Issues (20)
- gracefully and accurately handle "empty" entry points and dependency files that don't `export` a custom element
- support `shadowrootmode` attribute for declarative shadow DOM
- JSX components not rendering into a declarative shadow root (e.g. `<template>` tag)
- browser warning about "declarative Shadow DOM has not been enabled by includeShadowRoots" HOT 2
- drop support for CommonJS distribution
- `<style>` tag support in JSX
- Fragment (empty) tag support
- optimize how initial HTML is set on initial render for JSX usage
- adopt a bundle friendly and ESM compatible fork of escodegen
- adopt a bundle friendly and ESM compatible version of acorn-jsx
- registration of a custom element is being assumed when initializing a custom element
- duplicate loads of the DOM shim leads to an infinite rendering issue
- error for missing acorn-jsx package
- Support Constructable Stylesheets (CSS Modules) in DOM Shim
- Import Attributes syntax parsing
- WCC dropping query params when loading module URLs
- rename experimental test scripts to jsx
- TypeScript parsing support
- support tsx parsing
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from wcc.