CSS -Module (die einheimischen)

Das vom Browser nativ unterstützte CSS -Modul wird tatsächlich als "CSS -Modulskript" bezeichnet. Dies unterscheidet sich von beliebten Open -Source -Projekten, die Scope -Stile implementieren, indem eindeutige Klassennamenkennungen in HTML und CSS erstellt werden.

Das native CSS -Modul ist Teil des ES -Moduls (ähnlich wie das kürzlich eingeführte JSON -Modul):

 // reguläres ES -Modul importieren reagieren von "https://cdn.skypack.dev/®email Protected]";

// Neues JSON-Modul importieren configData aus './config-data.json' assert {type: 'json'};

// Neues CSS -Modul import Stylesheet aus "./styles.css" Assert {Typ: "CSS"};

Das erste Mal, als ich dies sah, stammte Justins Tweet:

Derzeit ist dies nur ein Merkmal von Chrome. Verwandte Links:

• Intent -Implementierung: CSS -Modul V1
• Chrome -Plattformstatus: CSS -Modulskript
• Github/Whatwg: Einführung von CSS -Modulskripten

Zum Zeitpunkt des Schreibens funktioniert es nur in Chrome Canary mit aktivierten Webplattformfunktionen der Webplattform. Wenn Sie fragen möchten: "Wann kann ich es in Produktionsprojekten verwenden und Benutzer dieser Projekte verwenden eine Vielzahl von Browsern?" Es kann Jahre dauern. Vielleicht nie. Aber es ist immer noch interessant. Vielleicht entwickelt sich die Unterstützung schnell. Vielleicht arbeiten Sie an einem Elektronenprojekt oder einem anderen Projekt, das Sie auf bestimmte Browserfunktionen verlassen können.

Dies sieht nach einer Erweiterung der konstruierbaren Stylesheets aus und beschränkt sich auch auf Chrombrowser, sodass Browser, die in dieser Hinsicht "zurückbleiben", von dort aus beginnen müssen.

Ich habe Justins Idee hier versucht:

Wenn ich aufzeichnete, was ich vom CSS -Modul -Import bekomme, ist es ein CSSstylesheet:

Wenn Sie tatsächlich Stile verwenden möchten ... liegt es an Ihnen. Die Idee von Justin wendet im Grunde genommen Stile als eine einzelne Codezeile an, da sie CSSstylesheet-Lit-HTML unterstützt (diese Dokumente geben dies nicht explizit an, aber ich denke, sie werden es irgendwann erklären). Für native Webkomponenten ist der Unterschied nicht viel: Sie importieren es, erhalten das CSStylesheet und wenden Sie es dann auf die Webkomponenten an, z. B. auf die Webkomponenten:

 this.shadowroot.AdoPtedStylheets = [mycsStylesheet];

Ich denke, die Bedeutung von all dem ist:

• Wir brauchen eine Möglichkeit, Stylesheets in JavaScript zu importieren, und dies ist im Grunde die erste wirklich klare Art, die ich kenne.
• Wenn wir jetzt wollen, können wir den programmatischen Zugriff auf das CSS zum Betrieb haben,
• Es sieht besonders gut für die Nutzung von Webkomponenten aus, ist aber universell. Sobald Sie ein Stylesheet haben, können Sie es so verwenden, wie Sie möchten.

Das obige ist der detaillierte Inhalt vonCSS -Module (die einheimischen). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!