Comments (15)
DylanPiercey
commented on June 22, 2024
@niutech since this approach uses shadow dom doesn't it mean that you cannot share styles between the placeholder and the streamed content?
from marko.
niutech
commented on June 22, 2024
@DylanPiercey Not directly, but you can use cached <link rel="stylesheet" href="..."> inside shadow root or use CSS shadow parts outside of it.
from marko.
DylanPiercey
commented on June 22, 2024
Since marko doesn't strictly care where or how you insert your assets, doing the duplication pattern there would be tricky for us to do automatically.
from marko.
DylanPiercey
commented on June 22, 2024
I need to play with this but possible you could keep things in light-dom like this:
<template shadowrootmode="open">
<slot name="content-main">
<slot name="content-placeholder"></slot>
</slot>
</template>
<div slot="content-placeholder">...</div>
<!-- later -->
<div slot="content-main">...</div>from marko.
niutech
commented on June 22, 2024
@DylanPiercey What is the rationale for nesting slots? You can put the placeholder directly in the <template> like this:
<slot name="content-main"><div class="content-placeholder">Loading...</div></slot>
The placeholder will be replaced with <div slot="content-main">...</div> when it arrives.
from marko.
DylanPiercey
commented on June 22, 2024
@niutech my concern is that if the placeholder is in the shadow dom it will not inherit the page level styles. By nesting the slots like I did I think it resolves that issue (you could use global css like normal since the placeholder and the main content would be in the light dom slots).
from marko.
DylanPiercey
commented on June 22, 2024
FYI @niutech I tested out
<template shadowrootmode="open">
<slot name="content-main">
<slot name="content-placeholder"></slot>
</slot>
</template>
<div slot="content-placeholder">...</div>
<!-- later -->
<div slot="content-main">...</div>It does in fact work!
However we can't really use this since I found two other issues.
- You cannot have adjacent DSD's, the following would error (which if we used this naively for out of order flushing would mean that you couldn't have two adjacent out of order awaits)
<!-- Causes an error in the browser -->
<template shadowrootmode="open">
</template>
<template shadowrootmode="open">
</template>- The
slotcontent needs to be directly nested within the same container as the DSD shadow root. This means wrapping the<template>with eg a<div>also causes it to break. (which means this doesn't work around the first issue)
<div>
<template shadowrootmode="open">
<slot name="content-main">
<slot name="content-placeholder"></slot>
</slot>
</template>
<div slot="content-placeholder">...</div>
</div>
<!-- later -->
<div slot="content-main">...</div>It'd be really cool if we could use an approach that doesn't use javascript without introducing new caveats. If anyone has ideas I'd love to hear them!
from marko.
niutech
commented on June 22, 2024
@DylanPiercey Why would you need multiple <template>s? You just need a single DSD shadow root covering the whole page with multiple slots.
from marko.
DylanPiercey
commented on June 22, 2024
@niutech you'd have to know all the slots up front which we can't if there are nested awaits. We also can't render user code inside the <template> because it breaks styling thanks to shadow dom.
from marko.
kcastellino
commented on June 22, 2024
Sorry for the drive by comment, but I think it's important to point out that elements inside a Shadow DOM are completely separated from the regular DOM, so in addition to styles being separated, form submissions from Light DOM won't include inputs in Shadow DOM (and vice versa), ARIA attributes in Light DOM can't point to elements inside the Shadow DOM (and vice versa), hyperlinks to element IDs inside a Shadow DOM won't work, and JS methods like document.getElementById() and document.querySelector() will not return elements inside a Shadow DOM. Putting any user code inside the <template> could potentially break a lot of sites.
from marko.
DylanPiercey
commented on June 22, 2024
@kcastellino yeah it's sad that they keep adding shadow dom exclusive features which could benefit the light dom 😓
from marko.
niutech
commented on June 22, 2024
@kcastellino Yes, but what if you put all the web page body in the Declarative Shadow DOM like this:
<body><template shadowrootmode="open"><link rel="stylesheet" href="..."><!-- or --><style>...</style><slot name="x">...</slot></template><div slot="x">...</div></body>?
Then all the forms, hyperlinks, ARIA attributes, scripts reside in the Shadow DOM, so there is no crossing the boundary of it and JS is not required for ooo HTML streaming.
Instead of document.querySelector(), you can use document.body.shadowRoot.querySelector() etc.
from marko.
kcastellino
commented on June 22, 2024
-
Slotted content is in Light DOM, not Shadow DOM
-
How exactly does sticking everything in one big slot fix anything? You still need to wait for all the HTML to be generated & streamed, in order.
The only thing you really get out of it is a single page-level loading placeholder which doesn't need JS, but that's not enough if you need to load parts of the page out-of-order
from marko.
niutech
commented on June 22, 2024
@kcastellino I'm not talking about one big slot, but one big DSD <template> covering the whole <body> and multiple <slot> islands inside it. Have a look at my demo and its source code (not using Marko).
from marko.
DylanPiercey
commented on June 22, 2024
@niutech I appreciate the suggestion and discourse. I'm going to close this for now unless we can come up with a POC that could avoid the limitations I mentioned before.
Feel free to comment more here if you like!
from marko.
Related Issues (20)
- bug: no such script in packages.json HOT 1
- try catch not supported when rendering
- error when rendering with $!{} in .marko file HOT 3
- Typescript: add missing directives
- TypeScript: add event handlers like `onclick` to native tags, with type `AttrString`
- TypeScript: Passing Attributes to Body Content Will Loose Type HOT 3
- Webpack error on Marko versions greater than 5.31.0 HOT 5
- Deprecation warnings in Chrome HOT 5
- `onInput` is not running when it is used in `component-browser.ts` HOT 1
- Static functions or arrow functions do not work on components without a class statement
- How does routing work? HOT 2
- Marko not properly tracking dependency updates in some situations when using the tags-api
- `Marko is not defined` when index.marko imports module from component.ts
- Cannot break generic parameter declarations into multiple lines HOT 3
- Specify Node Engine Constraint in package.json
- Removing a class attribute results in a "null" class HOT 5
- Uncaught DOMException on Marko 5.33.14 HOT 15
- Difference in dev/production builds
- `<await>` tag doesn't render correctly with `client-reorder` when inside `<table>` element HOT 3
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 marko.