Frage Mit CSS auf den Shadow DOM zugreifen?

[bodo92]

Hallo,

hab hier wieder mal ne schier unlösbares Vorhaben

Und zwar möchte die ich im folgenden Input-Feld Rot eingekreisten Elemente entfernen.

Der Element Baum im Inspector:

<input _ngcontent-bje-3="" class="mdl-textfield__input" id="beginn" type="datetime-local">
#shadow-root (user-agent)
    <div pseudo="-webkit-datetime-edit" id="date-time-edit" datetimeformat="dd.MM.yyyy HH:mm">
        <div pseudo="-webkit-datetime-edit-fields-wrapper">
            <span role="spinbutton" aria-valuetext="leer" aria-valuemin="1" aria-valuemax="31" aria-help="Tag" pseudo="-webkit-datetime-edit-day-field">tt</span>
            <div pseudo="-webkit-datetime-edit-text">.</div>
            <span role="spinbutton" aria-valuetext="leer" aria-valuemin="1" aria-valuemax="12" aria-help="Monat" pseudo="-webkit-datetime-edit-month-field">mm</span>
            <div pseudo="-webkit-datetime-edit-text">.</div>
            <span role="spinbutton" aria-valuetext="leer" aria-valuemin="1" aria-valuemax="275760" aria-help="Jahr" pseudo="-webkit-datetime-edit-year-field">jjjj</span>
            <div pseudo="-webkit-datetime-edit-text"> </div>
            <span role="spinbutton" aria-valuetext="leer" aria-valuemin="0" aria-valuemax="23" aria-help="Stunden" pseudo="-webkit-datetime-edit-hour-field">--</span>
            <div pseudo="-webkit-datetime-edit-text">:</div>
            <span role="spinbutton" aria-valuetext="leer" aria-valuemin="0" aria-valuemax="59" aria-help="Minuten" pseudo="-webkit-datetime-edit-minute-field">--</span>
        </div>
    </div>
</input>

Habe etwas gefunden jedoch geht das so nicht.. https://stackoverflow.com/questions/25211111/can-shadow-dom-elements-inherit-css


Mein Versuch (scss):

.mdl-textfield__input {
  height: 18px;

  /deep/ {
    #clear {
      visibility: hidden !important;
      display: none;
      opacity: 0;
    }

    #spin {
      visibility: hidden !important;
      display: none;
      opacity: 0;
    }

    #picker {
      visibility: hidden !important;
      display: none;
      opacity: 0;
    }
  }
}

 

[Tronjer]

Lol, du machst es einem auch nicht einfach.

Also erst einmal bietet Angular 2 drei Optionen zur View Encapsulation: emulated (default), native und none.
http://blog.thoughtram.io/angular/2015/06/29/shadow-dom-strategies-in-angular2.html
Um von 'außen' Styles zu applizieren, ließe sich die Kapselung aufheben, was allerdings nicht sinnvoll wäre.

Wenn du gerne Material Design als UI verwenden willst, dann nimm Angular 2 Material anstelle dieses MDL. Damit werden Elemente als Custom-Tags eingebunden und man kann diesen bedarfsweise auch CSS-Klassen anhängen, bzw. sie per [Styles] oder [StyleUrls] aus der jeweiligen Komponente heraus stylen.

Das <md-input> existiert bereits und wenn du unbedingt den Datepicker benötigst, dann warte lieber, bis das AM-Team den feritg hat, bevor du halbgare Lösungen einsetzt.

 

[bodo92]

Ich hatte Angular Material mal überflogen war aber der Auffassung das es noch nicht reif genug war, daher der Einsatz von MDL.
In den nächsten Wochen habe ich sowieso nicht viel Zeit um an dem Projekt viel weiter zu Arbeiten, schau mir das dann nochmal an..