app component structure, 'view' components with shadowdom disabled #3081
Replies: 1 comment
-
Yeah, I've had similar experiences wanting to adopt WebComponents and having reasons where I didn't need / want Shadow DOM and I know as part of my participation in the Web Component Community Group, this topic comes up and recommendations seem somewhat split on if Shadow DOM should be "optional" or not. One case I personally experienced is like yours, where I wasn't ready to refactor all my styles and site design to support Shadow DOM (yet) but at least wanted to migrate my SPA to Lit, coming from an existing a framework. The router I had used is based on Lit and so by default encapsulated all that view content inside a Shadow Root (e.g. However, in the case of #3080, I think it would be awesome to leverage Web Components as an alternative to 3rd party templating formats (handlebars, liquid, etc.) to generate page level HTML in SSG / SSR contexts, a la Next but following a familiar and predictable browser standard. This is what I was able to accomplish with a simple native // src/pages/artists.js
import fetch from 'node-fetch';
import '../components/card/card.js'; // <wc-card></wc-card>
export default class ArtistsPage extends HTMLElement {
async connectedCallback() {
const artists = await fetch('https://www.example.com/api/artists').then(resp => resp.json());
const html = artists(artist => {
return `
<wc-card>
<h2 slot="title">${artist}</h2>
<img slot="image" src="${artist}" alt="${artist}"/>
</wc-card>
`;
}).join('');
this.innerHTML = html;
}
} I wanted to do the same for Lit+SSR but unfortunately it seems that
In addition, I'm not sure if search engines and web crawlers can detect content inside a |
Beta Was this translation helpful? Give feedback.
-
It seems to be frowned upon to disable shadowdom in lit components and potentially unsupported in certain scenarios (e.g.: #3080).
There was a discussion on slack a little while back about 'view' components:
https://lit-and-friends.slack.com/archives/C03PF4L4L/p1655216297320959
Similar to that thread, I've been finding it useful to disable shadowdom in certain 'view' components.
Here is an example:
NOTE: the app-frame is not always rendered, e.g user has to be logged in.
The routes could look like this:
I prefer this over having the entire app being contained within the root components shadowdom:
This could be partially solved by a router if you could define routes like this (and have it render into the current element's slot):
But you would lose the state and component lifecycle from having a 'page-home' component.
Is this unnecessarily fighting with how lit is designed to work here? If the goal was to have the app structured in this way is it better to e.g. use lit for the components - then assemble the components into an app and handle routing and the 'view' components in some other framework?
Beta Was this translation helpful? Give feedback.
All reactions