feat(custom_fields): Add `do_not_eval` to stop evaluating js templates in an embedded card

README.md

@@ -760,7 +760,9 @@ Examples are better than a long text, so here you go:
         ]]]
   ```
 
-- <a name="custom_fields_card_example"></a>Or you can embed a card (or multiple) inside the button card (note, this configuration uses [card-mod](https://github.com/thomasloven/lovelace-card-mod) to remove the `box-shadow` of the sensor card. This is what the `style` inside the embedded card is for):
+- <a name="custom_fields_card_example"></a>Or you can embed a card (or multiple) inside the button card (note, this configuration uses [card-mod](https://github.com/thomasloven/lovelace-card-mod) to remove the `box-shadow` of the sensor card.
+
+- This is what the `style` inside the embedded card is for):
 
   ![custom_fields_3](examples/custom_fields_card.png)
 
@@ -794,6 +796,39 @@ Examples are better than a long text, so here you go:
       action: more-info
   ```
 
+To skip evaluating the templates in a custom_field (eg. you embed a `custom:button-card` inside a Custom Field), then you have to set `do_not_eval` to `true`.
+
+```yaml
+type: custom:button-card
+styles:
+  grid:
+    - grid-template-areas: "'test1' 'test2'"
+variables:
+  b: 42
+custom_fields:
+  test1:
+    card:
+      type: custom:button-card
+      variables:
+        c: 42
+      ## This will return: B: 42 / C: undefined
+      ## as it is evaluated in the context of the
+      ## main card (which doesn't know about c)
+      name: '[[[ return `B: ${variables.b} / C: ${variables.c}` ]]]'
+  test2:
+    ## This stops the evaluation of js templates
+    ## for the card object in this custom field
+    do_not_eval: true
+    card:
+      type: custom:button-card
+      variables:
+        c: 42
+      ## This will return: B: undefined / C: 42
+      ## as it is evaluated in the context of the local button-card
+      ## inside the custom_field (which doesn't know about b)
+      name: '[[[ return `B: ${variables.b} / C: ${variables.c}` ]]]'
+```
+
 ### Configuration Templates
 
 #### General

src/button-card.ts

@@ -701,7 +701,11 @@ class ButtonCard extends LitElement {
         if (!(value as CustomFieldCard).card) {
           fields[key] = this._getTemplateOrValue(state, value);
         } else {
-          cards[key] = this._objectEvalTemplate(state, (value as CustomFieldCard).card);
+          if ((value as CustomFieldCard).do_not_eval) {
+            cards[key] = copy((value as CustomFieldCard).card);
+          } else {
+            cards[key] = this._objectEvalTemplate(state, (value as CustomFieldCard).card);
+          }
         }
       });
     }
@@ -711,7 +715,11 @@ class ButtonCard extends LitElement {
         if (!(value as CustomFieldCard)!.card) {
           fields[key] = this._getTemplateOrValue(state, value);
         } else {
-          cards[key] = this._objectEvalTemplate(state, (value as CustomFieldCard).card);
+          if ((value as CustomFieldCard).do_not_eval) {
+            cards[key] = copy((value as CustomFieldCard).card);
+          } else {
+            cards[key] = this._objectEvalTemplate(state, (value as CustomFieldCard).card);
+          }
         }
       });
     }

src/types/types.ts

@@ -152,6 +152,7 @@ export interface CustomFields {
 
 export interface CustomFieldCard {
   card: LovelaceCardConfig;
+  do_not_eval?: boolean;
 }
 
 export interface Variables {