modifying attributes of Children

[eboody]

I saw in the codebase an example that referenced children like this

view! { cx,
    <div>
        <Style>{styles}</Style>
        {children(cx)
         .nodes
         .into_iter()
         .map(|child| {
// I dont know how to work with these children
         })
         .collect::<Vec<_>>()}
    </div>
}

What id like to do is access each child and set attributes on them such that I can create a wrapper component and modify children without explicitly doing it for every html tag in every component.

I see that there exist properties that ostensibly would allow me to do this but it looks like theyre private.

Any idea how I could, say, explicitly add a class name to each child html element?

[gbj]

I'd encourage you to think of each of the children in children(cx).nodes as essentially a black box: something you can iterate over and wrap, but not necessarily introspect and modify. The reason for this is essentially that there are some very significant performance optimizations that depend on elements created with the view macro not being modified externally like this.

I'm not sure the exact details of what you're trying to do, but the use case you're suggesting (adding a CSS class to every child element) is pretty easily accomplished in CSS itself without adding that child class to every element (with a .class > * selector), or can be accomplished in the view macro with the class = syntax. (I recognize there's a broader point here, I'm just speaking to the specific case.)

[eboody]

Thanks for the explanation!

Maybe I should elaborate a bit on what im trying to do.

What i'd like to do is create a wrapper component on which I pass a property of styles and those styles only apply to the children in that scope.

What I was hoping to accomplish is what other libraries do, like svelte for example, where it adds a class to each child element in the same scope and then uses that class to apply styles only to those elements and not, for example, html elements that are a part of another component, nested deeper or otherwise.

So youre suggesting I can accomplish this using view! {cx, class="something", ...}?

In that example would the specified class only apply to the children scoped to that component?

I remember trying this not too long ago and if there were nested components it would result in every child having the class specified by a parent component. Is that right?

[gbj]

You may want to take a look at the stylers library, which is designed for doing exactly this kind of scoped CSS styling, if you don't want to recreate what they're doing.

If you do want to do it yourself, then

view! { cx, class = "something",
  <div><p><span>"Content"</span></p></div>
}

will apply the class "something" to each of those elements. This doesn't generate a unique class name, but applies exactly what you give it — which gives the flexibility for libraries like stylers to handle generating the unique class names.

[eboody]

Ah! Amazing, thanks so much!!

[eboody]

So that stylers library didnt work for me but thanks to your help I managed to achieve what I wanted.

I also want to publish the component to crates.io so that other people can use it if they want.

Im having trouble setting it up so that I can import the component though. Is there anything I can read to figure this out?

This is what I got so far

Im pretty sure it has something to do with the Cargo.toml because when I import the crate from my disk with

leptos = { git = "https://github.com/leptos-rs/leptos", default-features = false, features = [
  "serde",
] }
leptos_meta = { git = "https://github.com/leptos-rs/leptos", default-features = false }

it works just fine, but when I want to upload it to crates.io, it's saying I need a specific version

[eboody]

Ah i found out that I have to include version = "0.2.0-beta"!

like this

leptos = { git = "https://github.com/leptos-rs/leptos", default-features = false, features = [
  "serde",
], version = "0.2.0-beta" }
leptos_meta = { git = "https://github.com/leptos-rs/leptos", default-features = false, version = "0.2.0-beta" }

[gbj]

Ah okay yeah -- crates.it doesn't look git dependencies without a version specified I think. All good now?

[eboody]

yep! thanks again