Korrekte Methode zum Anwenden von CSS auf benutzerdefinierte HTML5-Elemente

Question

Ich habe ein benutzerdefiniertes HTML5-Tag mit der Bezeichnung <scroll-content>. Dieses Tag wird für mich von einem Framework an bestimmten Stellen innerhalb meiner HTML-Datei erstellt und eingefügt. Nun würde Ich mag die CSS dieses Tags ändern, so in meiner CSS-Datei Ich ging:

scroll-content{ 
    overflow: hidden; 
} 

Es tat, was es soll, aber dann ist dies der richtige Weg, um die benutzerdefinierten Tags von Styling?

Ich kann ihnen keine Klasse hinzufügen, weil ich die Tags nicht erstelle, das Framework tut dies, daher kann ich nicht auf sie in meinem Code zugreifen und ich möchte Javascript vermeiden, um diese Tags zu finden und Klassen hinzuzufügen dieser Weg.

Ich würde gerne den Standard/sicherste Weg zum Ändern von benutzerdefinierten Tags kennen.

Answer 1

Sie CSS, um benutzerdefinierte Elemente anwenden können, wie Sie können, um Standard-HTML-Elemente.

Es ist nichts falsch mit scroll-content { ... }, wie in Ihrem Code geschrieben.

---

Der Hintergrund

Der Browser, auf einer grundlegenden Ebene, hat keine Ahnung, welche Elemente vorhanden sind. Es erkennt nichts ... bis es ist das Standard-Stylesheet (sample) ausgesetzt.

Das Standard-Stylesheet führt den Browser in HTML-Elemente ein.

Benutzerdefinierte Elemente können daher als Elemente definiert werden, die nicht im Standard-Stylesheet enthalten sind. (Elemente, die zwar vorhanden sind, aber vom Browser nicht unterstützt werden, können diese Definition verwenden.)

Benutzerdefinierte Elemente können jedoch in Autorenstilen in den Browser eingefügt werden.

Hier ist etwas wichtig zu beachten:

Wenn der Browser kein Element erkennen (das heißt, es ist nicht in dem Standard-Stylesheet), wird es CSS Anfangswerte gilt.

6.1.1 Specified values

Benutzerprogramme muß zuerst einen bestimmten Wert zu jeder Eigenschaft zuweisen basierend auf folgende Mechanismen (in der Reihenfolge der Priorität):

1. die CASCADE ergibt einen Wert, benutze es.

2. Andernfalls, wenn die Eigenschaft vererbt wird und das Element nicht das Stammverzeichnis der Dokumentstruktur ist, verwenden Sie den berechneten Wert des übergeordneten Elements .

3. Andernfalls verwenden Sie den Anfangswert der Eigenschaft. Der Anfangswert jeder Eigenschaft wird in der Definition der Eigenschaft angegeben.

Wie oben dargelegt, wenn ein Element nicht erkennt (# 1 # 2 & nicht anwendbar ist), verwenden, den Anfangswert von der Eigenschaftsdefinition (# 3 gilt).

So in Ihrem Fall:

• Ihr individuelles Element ist: <scroll-content>

• Ihre CSS ist: scroll-content { overflow: hidden; }

• Sie in Ihrer Frage sagen, dass dieser Code tut, was es soll machen. Wenn das von Ihnen genannte Framework jedoch keine zusätzlichen Stile für benutzerdefinierte Elemente bereitstellt, kann es nicht funktionieren (demo).

Hier ist der Grund:

• Da <scroll-element> nicht im Standard-Stylesheet ist, wird es CSS Anfangswerte verwenden.

• Nun, the initial value of the display property is inline.

• Aber the overflow property only works on block elements.

Es gibt also keine Möglichkeit, diese HTML/CSS Kombination – die overflow Eigenschaft ignoriert würde funktionieren könnte, als würde height, width und alle anderen Eigenschaften, die nicht gelten Elemente Inline.

Ein benutzerdefiniertes Element müsste display: block für overflow angewendet haben (demo).

ähnlich der einzige Grund body, div, h1, p, ul als Blockelemente vorhanden ist, weil sie auf diese Weise in dem Standard-Stylesheet definiert sind (sample).

Also, beiseite stellen die Argumente für und gegen benutzerdefinierte Elemente, hier ist das Endergebnis:

hinzufügen display: block auf Ihre benutzerdefinierte Elemente und Sie sind gut zu gehen.

Answer 2

Es wäre besser, wenn Sie die Verwendung benutzerdefinierter Tags vermeiden könnten, da Sie nie wissen, wann diese Tags standardisiert werden oder zu einem bestimmten Zeitpunkt eine bestimmte Verwendung haben.

denke ich, es wäre sicherer, wenn Sie eine Klasse zu diesem benutzerdefinierten Tag, so etwas wie zu erstellen:

.scroll-content{ 
    overflow: hidden; 
}