Curly braces in templates

[bux]

Goal

I would like to use the Intl.DateTimeFormat function inside a style template.
I'm pretty new to home assistant, bubble card and templates in general.

How does one escape curly braces inside the javascript literal?

Source Yaml

styles: >-
  ${card.querySelector('.bubble-sub-button-1').innerText = new Intl.DateTimeFormat("en-US", {weekday: 'long'}).format(new Date()) }

Which step did you already try?

• Double curly braces {{ }}
• trying to escape by using a backslash \{ \}

Problem

The options object that needs to be passed to the DateTimeFormat constructor has curly braces. Those need to be escaped for to be able to save the yaml.

Read the documentation

• I have read the documentation

[MrBearPresident]

The code you provided works for me;

type: custom:bubble-card
card_type: button
button_type: state
entity: sun.sun
styles: >-
  ${card.querySelector('.bubble-sub-button-1').innerText = new Intl.DateTimeFormat("en-US", {weekday: 'long'}).format(new Date()) }
sub_button:
  - entity: sun.sun
  - entity: sun.sun

[bux]

You are right. I was trying to please the syntax highlighter and didn’t check if it was already working.

so for me the syntax highlighting doesn’t work properly with added curly braces between the ${ }

[MrBearPresident]

Correct.