# NO BUG: %root% on Custom Element's \_cssCustom doesn't replaced without editing the code editor

**URL:** <https://forum.bricksbuilder.io/t/no-bug-root-on-custom-elements-csscustom-doesnt-replaced-without-editing-the-code-editor/17669>\
**Category:** Bugs\
**Tags:** v1-9-3\
**Created:** [December 7, 2023, 6:51am UTC](https://forum.bricksbuilder.io/t/no-bug-root-on-custom-elements-csscustom-doesnt-replaced-without-editing-the-code-editor/17669 "2023-12-07T06:51:38Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![suabahasa](https://forum.bricksbuilder.io/user_avatar/forum.bricksbuilder.io/suabahasa/32/3845_2.png) [@suabahasa](https://forum.bricksbuilder.io/u/suabahasa)\
**Post date:** [December 7, 2023, 6:51am UTC](https://forum.bricksbuilder.io/t/no-bug-root-on-custom-elements-csscustom-doesnt-replaced-without-editing-the-code-editor/17669/1 "2023-12-07T06:51:38Z")

</div>

**Browser** : Chrome 110  
**OS** : Windows

When registering a custom element, I want to add custom CSS using `%root%`, but it is not replaced with the element’s actual ID without opening the codemirror.

 ![image](https://forum.bricksbuilder.io/uploads/default/original/2X/6/640833227998a308a416d63b9f154f93c2b9ed44.png)

```php
public function get_nestable_children()
{
return [
            [
                'name' => 'block',
                'label' => __('Button animations', 'fancy-animations'),
                'settings' => [
                    'tag' => 'custom',
                    'customTag' => 'button',
                    'label' => __('Button animations', 'fancy-animations'),
                    '_attributes' => [
                        [
                            'name' => 'Role',
                            'value' => 'switch'
                        ],
                        [
                            'name' => 'aria-checked',
                            'value' => 'true'
                        ],
                        [
                            'name' => 'arial-label',
                            'value' => 'Enable animations'
                        ],
                        [
                            'name' => 'onclick',
                            'value' => 'fba_toggle_deactivation(fba_is_reload_page)'
                        ]
                    ],
                    '_width' => '3rem',
                    '_height' => '3rem',
                    '_padding' => [
                        'top' => '.3em',
                        'right' => '.3em',
                        'bottom' => '.3em',
                        'left' => '.3em'
                    ],
                    '_background' => [
                        'color' => [
                            'hex' => '#f5f5f5',
                            'id' => 'f010bc',
                            'name' => 'Color #1'
                        ]
                    ],
                    '_border' => [
                        'radius' => [
                            'top' => '50%',
                            'right' => '50%',
                            'bottom' => '50%',
                            'left' => '50%'
                        ],
                        'width' => [
                            'top' => '1',
                            'right' => '1',
                            'bottom' => '1',
                            'left' => '1'
                        ],
                        'style' => 'solid',
                        'color' => [
                            'hex' => '#9c27b0',
                            'id' => 'ae94a1',
                            'name' => 'Color #12'
                        ]
                    ],
                    '_background:hover' => [
                        'color' => [
                            'hex' => '#e0e0e0',
                            'id' => '4180b4',
                            'name' => 'Color #2'
                        ]
                    ],
                    '_cssCustom' => "%root%[aria-checked=\"false\"]{\n\n opacity: .6;\n filter: grayscale(1);\n \n}\n\n%root%:hover{\n filter: grayscale(0);\n}",
                    '_opacity:hover' => '1',
                    '_cssTransition' => 'all .3s'
                ],
                'children' => [
                    [
                        'name' => 'icon',
                        'settings' => [
                            'icon' => [
                                'library' => 'svg',
                                // 'svg' => [
                                // 'id' => 331,
                                // 'filename' => 'animation-icon-bold.svg',
                                // 'url' => 'http://animations.local/wp-content/uploads/2023/12/animation-icon-bold.svg'
                                // ],
                                'fill' => [
                                    'hex' => '#9c27b0',
                                    'id' => 'ae94a1',
                                    'name' => 'Color #12'
                                ]
                            ],
                            '_width' => '2rem',
                            '_height' => '2rem'
                        ]
                    ]
                ]
            ],
            [
                'name' => 'text-basic',
                'label' => __('Tooltip', 'fancy-animations'),
                'settings' => [
                    'text' => 'Animations',
                    '_attributes' => [
                        [
                            'name' => 'role',
                            'value' => 'tooltip'
                        ]
                    ],
                    '_position' => 'absolute',
                    '_width' => 'max-content',
                    '_widthMin' => '100px',
                    '_typography' => [
                        'text-align' => 'center',
                        'line-height' => '1em',
                        'color' => [
                            'hex' => '#f5f5f5',
                            'id' => '6120d2',
                            'name' => 'Color #1'
                        ]
                    ],
                    '_padding' => [
                        'top' => '.5em',
                        'right' => '.5em',
                        'bottom' => '.5em',
                        'left' => '.5em'
                    ],
                    '_transform' => [
                        'translateX' => '-50%',
                        'translateY' => '100%'
                    ],
                    '_bottom' => '-.5rem',
                    '_left' => '50%',
                    '_background' => [
                        'color' => [
                            'hex' => '#9c27b0',
                            'id' => 'dc0992',
                            'name' => 'Color #12'
                        ]
                    ],
                    '_border' => [
                        'radius' => [
                            'top' => '.5em',
                            'right' => '.5em',
                            'bottom' => '.5em',
                            'left' => '.5em'
                        ]
                    ],
                    '_visibility' => 'hidden',
                    '_opacity' => '0',
                    '_cssTransition' => 'all .5s'
                ],
            ]
        ];
}

```

---

<div class="post-metadata">

**Author:** ![charaf](https://forum.bricksbuilder.io/user_avatar/forum.bricksbuilder.io/charaf/32/34412_2.png) [@charaf](https://forum.bricksbuilder.io/u/charaf)\
**Post date:** [December 7, 2023, 2:19pm UTC](https://forum.bricksbuilder.io/t/no-bug-root-on-custom-elements-csscustom-doesnt-replaced-without-editing-the-code-editor/17669/2 "2023-12-07T14:19:22Z")

</div>

Hi @suabahasa,

Just to be clear: you’re editing the CSS in a code editor, not in the builder correct?

If so then that’s expected as the logic for converting the ID to %root% & vice-versa is in the builder/codemirror itself.

Correct me if I misunderstood your report 🙂

---

<div class="post-metadata">

**Author:** ![suabahasa](https://forum.bricksbuilder.io/user_avatar/forum.bricksbuilder.io/suabahasa/32/3845_2.png) [@suabahasa](https://forum.bricksbuilder.io/u/suabahasa)\
**Post date:** [December 7, 2023, 2:56pm UTC](https://forum.bricksbuilder.io/t/no-bug-root-on-custom-elements-csscustom-doesnt-replaced-without-editing-the-code-editor/17669/3 "2023-12-07T14:56:08Z")

</div>

Hi,

**I’m not editing the CSS.**

it is from the `get_nestable_children` method on the custom Element.

So custom elements can’t have custom classes with selectors that target themselves?

Why `%root%` only replaced by codemirror?

---

<div class="post-metadata">

**Author:** ![suabahasa](https://forum.bricksbuilder.io/user_avatar/forum.bricksbuilder.io/suabahasa/32/3845_2.png) [@suabahasa](https://forum.bricksbuilder.io/u/suabahasa)\
**Post date:** [December 7, 2023, 2:57pm UTC](https://forum.bricksbuilder.io/t/no-bug-root-on-custom-elements-csscustom-doesnt-replaced-without-editing-the-code-editor/17669/4 "2023-12-07T14:57:24Z")

</div>

See this another related issue [Couldn't add class to Custom Element](https://forum.bricksbuilder.io/t/couldnt-add-class-to-custom-element/17671)

---

<div class="post-metadata">

**Author:** ![suabahasa](https://forum.bricksbuilder.io/user_avatar/forum.bricksbuilder.io/suabahasa/32/3845_2.png) [@suabahasa](https://forum.bricksbuilder.io/u/suabahasa)\
**Post date:** [December 8, 2023, 6:05pm UTC](https://forum.bricksbuilder.io/t/no-bug-root-on-custom-elements-csscustom-doesnt-replaced-without-editing-the-code-editor/17669/5 "2023-12-08T18:05:29Z")

</div>

Hi @charaf, what’s the status of this issue?

I think this shouldn’t be marked completed.

---

<div class="post-metadata">

**Author:** ![charaf](https://forum.bricksbuilder.io/user_avatar/forum.bricksbuilder.io/charaf/32/34412_2.png) [@charaf](https://forum.bricksbuilder.io/u/charaf)\
**Post date:** [December 11, 2023, 5:40pm UTC](https://forum.bricksbuilder.io/t/no-bug-root-on-custom-elements-csscustom-doesnt-replaced-without-editing-the-code-editor/17669/6 "2023-12-11T17:40:46Z")

</div>

Hi @suabahasa,

Apologies for the late reply. The ID is saved as the ID itself not %root%, the %root% keyword is specific to our code control to make it more user-friendly for users.

I have to say a bit confused by the use case so I don’t want to misguide you. Can you help me understand what’s your end goal?

I’m guessing you’d like to create some elements with predefined styling, correct? which is something that you can target using the element’s name in CSS file. But also looking at the other ticket looks like you’d like to create global styles as well.

If the goal is to have the styling in the Custom CSS area so that it’s more easily customizable, then yes going through the global classes is best. However, you’ll handle both independently. As in you need to create the global styles and add them to the site and then you can assign its ID to an element.

I think I might be more helpful if you can share more details though.

---

<div class="post-metadata">

**Author:** ![suabahasa](https://forum.bricksbuilder.io/user_avatar/forum.bricksbuilder.io/suabahasa/32/3845_2.png) [@suabahasa](https://forum.bricksbuilder.io/u/suabahasa)\
**Post date:** [December 13, 2023, 4:03pm UTC](https://forum.bricksbuilder.io/t/no-bug-root-on-custom-elements-csscustom-doesnt-replaced-without-editing-the-code-editor/17669/7 "2023-12-13T16:03:24Z")

</div>

Hi @charaf,

Our use case is to create a custom element as shown on [Create Your Own Elements – Bricks Academy](https://academy.bricksbuilder.io/article/create-your-own-elements/)

The custom element we build must bundle the style to be ready to use with the default style.

---

<div class="post-metadata">

**Author:** ![charaf](https://forum.bricksbuilder.io/user_avatar/forum.bricksbuilder.io/charaf/32/34412_2.png) [@charaf](https://forum.bricksbuilder.io/u/charaf)\
**Post date:** [December 14, 2023, 1:32pm UTC](https://forum.bricksbuilder.io/t/no-bug-root-on-custom-elements-csscustom-doesnt-replaced-without-editing-the-code-editor/17669/8 "2023-12-14T13:32:08Z")

</div>

I see. I think the easiest way to go about this is to develop the custom elements, and then create the global classes independently and assign them to the element. Then you can bundle these elements as templates (either locally or through remote templates).

To do it all programmatically you’ll have to handle the global classes independently. They’re stored in wp\_options table with the key being “bricks\_global\_classes”. Each global class will have an ID, and that’s what you need to assign in the \_cssGlobalClasses property (not the class name).

 ![Screenshot 2023-12-14 at 16.21.02](https://forum.bricksbuilder.io/uploads/default/original/2X/b/bbf33d7ca31d7cc51240dc072e7c31e15feb9f97.jpeg)