[Bug]: on new 3.2.3 card_mod: Argument 1 ('target') to MutationObserver.observe must be an instance of Node

[Mariusthvdb]

Description

been using this mod for a long time with succes, but now have to comment the complete section on mwc-tab as shown below. If I dont comment that section, the error as posted is displayed in inspector

I dont think there was a change in tabbed-card that made this happen? I noticed it just the other day, after updating card_mod to the 3.2.3 version, which is required for HA 2023.10, as currently in beta.

if I comment the section, the error is gone, but non of the other mods work... cant even set the background of the tabbed bar anymore.

If anyone spots an obvious fix for this, I would truly appreciate. Missing out in those particular settings is a real setback and I truly hope to be able to get them back, most importantly the mdc-icon-size, and border-color on the indicator.

thanks

Environment

- OS: [e.g. iOS, Linux] Any device
- Browser: [e.g. chrome, safari] Chrome and Safari
- Home Assistant Version: [e.g. 2023.9.0] 2023.10.0b4       
- Tabbed Card Version: [e.g. 0.3.2] 0.3.2

Reproducible configuration

type: custom:mod-card
card_mod:
  style:
    tabbed-card $:
      .: |
        mwc-tab-bar {
          background: {{'var(--lovelace-background)'
                        if states('input_select.theme')|regex_search('(ight|Dark|Matrix)')
                        else 'var(--primary-color)'}};
        }
#       mwc-tab:
#         $:
#           mwc-tab-indicator $: |
#            .mdc-tab-indicator__content--underline {
#               border-color: var(--text-color-off) !important;
#             }
#
#           .: |
#             .mdc-tab {
#               min-width: 80px;
#             }
#             .material-icons {
#               display: contents !important;
#             }
#
#             .mdc-tab--active {
#               --mdc-icon-size: {{states('input_number.active_icon_size')}}px;
#               /*background: var(--text-color-off) !important;*/
#             }

    .: |
      tabbed-card {
        --mdc-tab-horizontal-padding: 0px;
      }

Additional context

[Mariusthvdb]

fixed, see https://community.home-assistant.io/t/card-mod-add-css-styles-to-any-lovelace-card/120744/5170?u=mariusthvdb

As Ildar had explained but I missed that note we need to do

[quote="Ildar_Gabdullin, post:4280, topic:120744"] Note (11.04.23): some stylings stopped working after 2023.4. Try this workaround to fix: instead of:

        card_mod:
          style:
            tabbed-card $: |
              ...... {

use this:

        card_mod:
          style:
            tabbed-card:
              $: |
                ...... {

[/quote]

so

type: custom:mod-card
card_mod:
  style:
    tabbed-card:
      $:
        .: |
          mwc-tab-bar {
            background: {{'var(--lovelace-background)'
                          if states('input_select.theme')|regex_search('(ight|Dark|Matrix)')
                          else 'var(--primary-color)'}};
          }
        mwc-tab:
          $:
            mwc-tab-indicator $: |
             .mdc-tab-indicator__content--underline {
                border-color: var(--text-color-off) !important;
              }

            .: |
              .mdc-tab {
                min-width: 80px;
              }
              .material-icons {
                display: contents !important;
              }

              .mdc-tab--active {
                --mdc-icon-size: {{states('input_number.active_icon_size')}}px;
                /*background: var(--text-color-off) !important;*/
              }

      .: |
        tabbed-card {
          --mdc-tab-horizontal-padding: 0px;
        }

card:
  type: custom:tabbed-card

now brings back all card mods, and takes out the error.

Not sure why I only notice now, but it must be because I had remained on card_mod 3.1.4 and only now updated to the latest version. case and issue closed, sorry for the noise