do components have a name or id I can use for either Javascript or setting CSS properties?

Ben H · 2024-09-18T00:56:47.983+00:00

On my web page I have an onboarding-card component that is repeated a bunch of times. I'm trying to implement some Javascript to automatically scroll down to a card. If these were HTML elements with ids, I could use scrollIntoView(), but since these are components they don't have ids -- or do they? I tried making an attribute named id inside the component but that didn't seem to be recognized by scrollIntoView().Relatedly, if I wanted to override the CSS of a particular component, is there a way I can do this with CSS? For example, if I put a style script on my page that includes the component, can I specify a particular component?[what would I put here?] { background-color: yellow;}

Ben H
1 year ago
On my web page I have an onboarding-card component that is repeated a bunch of times. I'm trying to implement some Javascript to automatically scroll down to a card. If these were HTML elements with ids, I could use scrollIntoView(), but since these are components they don't have ids -- or do they? I tried making an attribute named id inside the component but that didn't seem to be recognized by scrollIntoView().

Relatedly, if I wanted to override the CSS of a particular component, is there a way I can do this with CSS? For example, if I put a style script on my page that includes the component, can I specify a particular component?

[what would I put here?] {
background-color: yellow;
}
Tom Ireland
1 year ago
Hey, Ben. If your component contains elements, you can add an id attribute to the top level element and use the Get element by id formula as part of your event. I’ve not used scroll into view myself but assume that would work.

For overriding CSS, you can use classes to override any default styles. These are applied when a condition is true.

Does that help?
👍1
Ben H
1 year ago
Thx Tom, that does seem like the easiest way to solve my scrolling issue.

It appears that components themselves don't have ids, similar to React components. I did figure out you can dynamically assign an id to the root element of a component, and then manipulate or get information about the component using the root id with Javascript DOM methods. However, I don't think that is best practice, either in toddle or React. It seems that best practice is to avoid directly manipulating the DOM using Javascript.
Tom Ireland
1 year ago
No worries, Ben. I think getting information from the DOM is okay but manipulating it could lead to some issues (don't quote me on that). I know that it's possible to do some DOM manipulation e.g. render HTML. There's a package for that, so assume this is okay in toddle but I think you have to sanitise it, so probably best to work with elements in toddle. Always keen to push the boundaries though. 😉 I'll wait and see if anyone in the toddle team or community say otherwise. 😄
🙌1
Lucas G
1 year ago
Components can definitely have custom IDs
Generally, you’d assign unique IDs to a component so that it can be reused
Definitely has to be unique if the component is being repeated
Lucas G
1 year ago
You can also have a component send back its unique id as an event as then use that in other formulas
Tom Ireland
1 year ago
I'm keen to learn more about that, @Lucas G . I know I can add an id attribute to the component but that's not the same as an id attribute for an element where you can use Get element by ID to get it. I don't see where I could define that for a component. That would probably be better for Ben in this case maybe instead of having to add an additional element to get it by id for the scroll event.
@Tom Ireland
I'm keen to learn more about that, @Lucas G . I know I can add an id attribute to the component but that's not the same as an id attribute for an element where you can use Get element by ID to get it. I don't see where I could define that for a component. That would probably be better for Ben in this case maybe instead of having to add an additional element to get it by id for the scroll event.
Lucas G
1 year ago
Why is it not the same?
An id attribute is what you'd use in a getElementById function
I don't follow
Tom Ireland
1 year ago
This is what I was curious about. An id attribute (if created) for a component will be undefined by default unless a value is specified. My understanding of component attributes was to pass data in to elements within the component and was not aware that you could use Get element by id for the id attribute of a component for use with events. I haven’t ever tried that iirc, so if that’s possible, great.
@Tom Ireland
This is what I was curious about. An id attribute (if created) for a component will be undefined by default unless a value is specified. My understanding of component attributes was to pass data in to elements within the component and was not aware that you could use Get element by id for the id attribute of a component for use with events. I haven’t ever tried that iirc, so if that’s possible, great.
Lucas G
1 year ago
Ooh I think we're confusing attributes
I was referring to HTML attribute
Which you can also set via a component attribute if you'd want, yeah
Tom Ireland
1 year ago
Aye, I was wondering. 😄

do components have a name or id I can use for either Javascript or setting CSS properties?

Ben H

Tom Ireland

Ben H

Tom Ireland

Lucas G

Lucas G

Tom Ireland

Lucas G

Tom Ireland

Lucas G

Tom Ireland