trying to create a module with shadowroots

[mrgrlscz]

Goal

Hi there, i'm trying to create a module for sharing a card_mod configuration across a bunch of bubble-select cards.
Here's the working code via classic card_mod:

type: custom:bubble-card
card_type: select
entity: input_select.spotify_playlist
icon: mdi:music
name: Playlist
show_icon: false
show_state: true
card_mod:
  style:
    .bubble-buttons-container>div>ha-select$div>ha-menu$mwc-menu-surface$: |
      div {
        left: unset !important;
        right: 0px !important;
        top: -18px !important;
        min-width: min-content !important;
        scrollbar-width: none;
        box-shadow: 0px 0px 0px 1px var(--nova-color) !important;
      }
    .bubble-buttons-container>div>ha-select$div>ha-menu$mwc-menu-surface>ha-list$: |
      ul {
        padding: 4px 0px !important;
      }

Source Yaml

Here's the module i tried to set-up:

nova-select:
  name: Nova Select
  version: "v1.0"
  creator: "Mrgrlscz"
  description: ""
  code:
    .bubble-buttons-container>div>ha-select$div>ha-menu$mwc-menu-surface$: |
      div {
        left: unset !important;
        right: 0px !important;
        top: -18px !important;
        min-width: min-content !important;
        scrollbar-width: none;
        box-shadow: 0px 0px 0px 1px var(--nova-color) !important;
      }
    .bubble-buttons-container>div>ha-select$div>ha-menu$mwc-menu-surface>ha-list$: |
      ul {
        padding: 4px 0px !important;
      }

### Which step did you already try?

All my other modules are working well... i think because there is `code: |` inside.



### Problem

_No response_

### Read the documentation

- [X] I have read the documentation

[Clooos]

Hi! This structure isn't supported in Bubble Card, this is only working with card_mod.

And it is not possible to target these elements in the dropdown with just CSS, this element is imported from HA and contains a lot of nested shadow roots. But it is probably possible to inject these with some JS templates, I'm just not sure if this will be applied instantly.

This is definitely not a simple task and I just tried without great success (but I haven’t tried hard).

But you can check the CSS variables that are available in this card, this is definitely easier to customize it, even if it's more limited.

Sorry for not helping much, this is indeed something card_mod is doing great.

[mrgrlscz]

Okay... Thank you for the answer!