What version of astro are you using?

2.7.2

Are you using an SSR adapter? If so, which one?

None

What package manager are you using?

npm

What operating system are you using?

Mac

What browser are you using?

Chrome

Describe the Bug

Setting dynamic tag like: const Element = shouldBeButton ? 'button' : 'div' and than using it on the top level: <Element>Some Text</Element> of the html causes define:vars to not work. There is no style="--myVar: value" inside button or div element.

What's the expected result?

Astro should render chosen element with style="--myVar: value" attribute.

Link to Minimal Reproducible Example

https://stackblitz.com/edit/astro-minimal-example-custom-tags

Participation

• I am willing to submit a pull request for this issue.