# Modifying style attribute dynamically on Topic List Item

**URL:** https://meta.discourse.org/t/modifying-style-attribute-dynamically-on-topic-list-item/346415
**Category:** Development
**Created:** [January 9, 2025, 11:08pm UTC](https://meta.discourse.org/t/modifying-style-attribute-dynamically-on-topic-list-item/346415 "2025-01-09T23:08:10Z")
**Posts on this page:** 1
**Showing post:** 7

<div class="post-metadata">

### Author: ![david](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/david/32/157490_2.png) [@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")

</div>

`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:

> <https://github.com/discourse/discourse-topic-thumbnails/blob/4e4fc54ace3cfdce2299c74c03c631780363d7b9/javascripts/discourse/initializers/topic-thumbnails-init.gjs#L49-L57>

Then we render a dynamic `<style>` tag in a separate plugin-outlet, which targets those class names:

> <https://github.com/discourse/discourse-topic-thumbnails/blob/4e4fc54ace3cfdce2299c74c03c631780363d7b9/javascripts/discourse/connectors/before-topic-list-body/topic-list-masonry-styles.gjs#L53-L60>

That said… it is a little convoluted, so perhaps we should look at adding a specific valueTransformer to allow changing the `style=` attribute. It’s a _little_ tricky because of Ember’s xss/htmlSafe protections on that attribute… but I’m sure we could get something working.

---

_[View the full topic](https://meta.discourse.org/t/modifying-style-attribute-dynamically-on-topic-list-item/346415)._