Replies: 3 comments 13 replies
-
Design-wise: the biggest concern here (historically and still now) has been server-side rendering: specifically that there's no concept of a shadow root in HTML and so if you render HTML that includes scoped styles they will leak until some JS runs to attach the shadow roots. There's now declarative shadow DOM and a polyfill for that, so that's one route of course. Or if you're just using CSR it doesn't really matter, and you can create a wrapper component that mounts its |
Beta Was this translation helpful? Give feedback.
-
You could implement
An example might be helpful here. Something like this seems at least to compile for me: #[component]
pub fn App() -> impl IntoView {
let el_ref = NodeRef::<Custom>::new();
Effect::new(move |_| {
if let Some(el) = el_ref.get() {
let event = Event::new("customEvent").unwrap();
el.unchecked_ref::<EventTarget>().dispatch_event(&event);
}
});
view! { <some-element node_ref=el_ref></some-element> }
}
It is a re-export of |
Beta Was this translation helpful? Give feedback.
-
Thanks for all the pointers so far! It turns out that declarative shadow DOM only works for server-side rendering, since declarative DOM needs to be fully materialized at parse time. I took stab at wrapping shadow DOM in a component. Do you have any suggestions for how to improve it? Would something in this vein be appropriate for inclusion in Leptos proper? I assume there are better patterns for interfacing between Leptos and JS. Unfortunately, I had to include the cludgy extern block to bring in some JS bindings that were not available in web-sys. I'm also not happy with the untyped string styles, but this works for my purposes. On the note of styles/templating: what steps does Leptos take at the moment to ensure that values are escaped/sanitized?
|
Beta Was this translation helpful? Give feedback.
-
Is it possible to use transparently enable shadow DOM when creating custom components? This is a cleaner/easier way to manage styles since it severs the inheritance chain (with a few exceptions, such as fonts). I'm a big fan of Lit and custom components in general for this reason.
I'm sure this can be done by directly manipulating the DOM, but I would much rather use the
view!
macro to automatically insert shadow nodes where desired. Not sure if this is already implemented and I've missed it or if there are design reasons to specifically not include this.In the meantime, in order to use off-the-shelf components or more complex visual components with styles, I've been implementing custom elements in JS and then just inserting those elements into the view. Since custom elements are expose vanilla JS widgets, this works out of the box, and very cleanly.
It might also be nice to include the ability to create and register components as custom elements for use outside of Leptos, but I suspect this is out of scope. It's also not clear how you would use such a component as a third-party dependency since you'd need to import Leptos itself and any other Rust code used as WASM.
Beta Was this translation helpful? Give feedback.
All reactions