### Author:  [@merefield](https://meta.discourse.org/u/merefield)
#### Post date: [January 9, 2025, 11:08pm UTC](https://meta.discourse.org/t/modifying-style-attribute-dynamically-on-topic-list-item/346415/1 "2025-01-09T23:08:10Z")
Disclaimer: very happy with the direction here and thanks for all the work so far as there’s a lot of power in the new system. Just need to make sure we keep some equivalent capabilities? …
> [@Upcoming topic-list changes - how to prepare themes and plugins](https://meta.discourse.org/t/upcoming-topic-list-changes-how-to-prepare-themes-and-plugins/343404/1):
>
> ## 🆘 What about other customizations?
>
> If your customization cannot be achieved using the new APIs we’ve introduced, please let us know by creating a new #Development topic to discuss.
In my Component, TLP, I’m currently setting the style attribute of the Topic List Item outer tag dynamically:
- setting the `background:` colour to a unique RGB value to match the dominant colour of the image. This should ideally be done in Ember loop.
I’m also setting setting `grid-row-end` to very quickly determine the size of the masonry element. This is very fast and efficient and avoids a lot of Javascript. However, for this I’m using Javascript as depends on the final sizes in the DOM.
Currently these co-exist happily.
``
These are both critical customisations to the Theme Component and without them, it would not be supportable.
This first amendment to style is currently achieved with a direct style attribute binding with modifyClass, which I understand is a deprecated method.
>
Would it be possible to have an API in the new world for this please?
Or perhaps I’ve missed an existing way to swing this?
However this is not something I believe can be achieved with classes.
---
### Author:  [@Don](https://meta.discourse.org/u/Don)
#### Post date: [January 10, 2025, 6:52am UTC](https://meta.discourse.org/t/modifying-style-attribute-dynamically-on-topic-list-item/346415/2 "2025-01-10T06:52:39Z")
> [@merefield](#):
>
> which I understand is a deprecated method.
Is it? 😕 It’s not just require to update to the native class syntax?
> [@Using modifyClass to change core behavior](https://meta.discourse.org/t/using-modifyclass-to-change-core-behavior/262064):
>
> For advanced themes and plugins, Discourse offers the modifyClass system. This allows you to extend and override functionality in many of core’s javascript classes. When to use modifyClass modifyClass should be a last resort, when your customization cannot be made via Discourse’s more stable customization APIs (e.g. plugin-api methods, plugin outlets, transformers). Core’s code can change at any time. And therefore, customizations made via modifyClass could break at any time. When using this A…
---
### Author:  [@merefield](https://meta.discourse.org/u/merefield)
#### Post date: [January 10, 2025, 6:54am UTC](https://meta.discourse.org/t/modifying-style-attribute-dynamically-on-topic-list-item/346415/3 "2025-01-10T06:54:16Z")
> [@Upcoming topic-list changes - how to prepare themes and plugins](https://meta.discourse.org/t/upcoming-topic-list-changes-how-to-prepare-themes-and-plugins/343404/1):
>
> Upgrades will also be required if you use modifyClass on `component:topic-list` or `component:topic-list-item`.
>
> If your site has any of these incompatible customizations,
I’m going by this
---
### Author:  [@Don](https://meta.discourse.org/u/Don)
#### Post date: [January 10, 2025, 6:56am UTC](https://meta.discourse.org/t/modifying-style-attribute-dynamically-on-topic-list-item/346415/4 "2025-01-10T06:56:02Z")
Oh, I see. I thought that meant this upgrade.
> [@Don](#):
>
> It’s not just require to update to the native class syntax?
---
### Author:  [@merefield](https://meta.discourse.org/u/merefield)
#### Post date: [January 10, 2025, 7:01am UTC](https://meta.discourse.org/t/modifying-style-attribute-dynamically-on-topic-list-item/346415/5 "2025-01-10T07:01:14Z")
It would be good to get clarity.
- So is `modifyClass` still valid? (Just updated syntax - might be good if so to reference that guide)
- Can I still use that to access the style attribute of the enclosing tag?
Classic Components are different in that they historically provided access to enclosing tag level attributes outside of the template so they were straightforward to modify dynamically in code.
---
### Author:  [@Don](https://meta.discourse.org/u/Don)
#### Post date: [January 10, 2025, 7:34am UTC](https://meta.discourse.org/t/modifying-style-attribute-dynamically-on-topic-list-item/346415/6 "2025-01-10T07:34:40Z")
Ah, you’re right. There is a deprecated notice in console.
> Deprecation notice: Modifying ‘component:topic-list-item’ with ‘modifyClass’ is deprecated. Use the value transformer ‘topic-list-columns’ and other new topic-list plugin APIs instead.
---
### Author:  [@david](https://meta.discourse.org/u/david)
#### Post date: [January 10, 2025, 9:52am UTC](https://meta.discourse.org/t/modifying-style-attribute-dynamically-on-topic-list-item/346415/7 "2025-01-10T09:52:16Z")
`modifyClass` itself is not deprecated. It’s a risky customization method, and you should take precautions when using it (as described in the doc @don linked), but we don’t have any imminent plans to remove it.
The reason we’re printing a deprecation message for `component:topic-list` and `component:topic-list-items` is that those components are the legacy implementation of the topic list, and are not used when the glimmer topic list is enabled. Now, we have a set of glimmer components like `components/topic-list/item`.
So, technically, you could use `modifyClass` on those new components. But, because they’re glimmer components, you won’t be able to modify the style tag via the JS class, so it won’t help with the problem in the OP.
> [@merefield](#):
>
> Or perhaps I’ve missed an existing way to swing this?
>
> However this is not something I believe can be achieved with classes.
We have a similar ‘masonry’ mode in the official d-topic-thumbnails theme component, so it’s worth looking at how that’s implemented. We add a unique class to each ‘row’ of the topic list:
>
Then we render a dynamic `