suchen

Heim  >  Fragen und Antworten  >  Hauptteil

Wie kann man ohne JS eine Klasse im Schattenstamm anvisieren?

Angenommen, ich habe ein HTML-Element mit Schattenstamm.

1

2

3

4

<my-element>

#shadow-root

<div class='need-target-this' />

</my-element>

Wie positioniere ich div innerhalb der Schattenwurzel?

Ich habe es mit

versucht

1

:host(my-element.need-target-this)

Aber das hilft nicht. Was fehlt mir hier?

P粉610028841P粉610028841324 Tage vor555

Antworte allen(2)Ich werde antworten

  • P粉521013123

    P粉5210131232024-03-31 10:24:38

    • 在shadowDOM内使用 `; } connectedCallback(){ this.shadowRoot.querySelector("span").innerHTML = `Web Component!`; } });

      1

      2

      3

      4

      5

      6

      7

      8

      9

      10

      11

      12

      13

      14

      15

      <style>

        * { font: 42px Arial }

        span {

          background:gold; /* slot content styled by Global CSS! */

        }

        .target { border: 5px solid blue } /* does NOT style shadowDOM! */

         

        my-element::part(mytarget) {

          font-size: 150%;

        }

      </style><code>

       

      <my-element class="target"><span slot="title">Hello</span>

       

      </my-element></code>

      Antwort
      0
  • P粉232793765

    P粉2327937652024-03-31 00:21:30

    万一它会对某人有所帮助:我用 div 包装了我的元素,添加了 ref 然后去了

    const Shadow = ref.current.querySelector('my-element').shadowRoot

    const target = Shadow?.querySelector('.need-target-this')

    target.style.whatever = '值';

    Antwort
    0
  • StornierenAntwort