CSSモジュール（ネイティブのモジュール）

ブラウザによってネイティブにサポートされるCSSモジュールは、実際には「CSSモジュールスクリプト」と呼ばれます。これは、HTMLとCSSで一意のクラス名識別子を作成することにより、スコープスタイルを実装する一般的なオープンソースプロジェクトとは異なります。

ネイティブCSSモジュールは、ESモジュールの一部です（最近導入したJSONモジュールとよく似ています）：

 //通常のESモジュールインポート「https://cdn.skypack.dev/」からのReact from "Email Protected]」;

//新しいJSONモジュールインポートconfigData from './config-data.json' assert {type： 'json'};

// "./styles.css" assert {type： "css"}からの新しいCSSモジュールインポートstyleSheet

これを初めて見たのは、ジャスティンのツイートからでした。

現在、これはChromeの単なる機能です。関連リンク：

• 意図実装：CSSモジュールV1
• Chromeプラットフォームステータス：CSSモジュールスクリプト
• github/whatwg：CSSモジュールスクリプトの導入

執筆時点では、Chrome Canaryでのみ機能し、実験的なWebプラットフォーム機能が有効になっています。 「生産プロジェクトでいつ使用でき、これらのプロジェクトのユーザーはさまざまなブラウザを使用できますか？それには何年もかかるかもしれません。多分決して。しかし、それはまだ面白いです。おそらくサポートは急速に発展するでしょう。たぶん、特定のブラウザ機能に頼ることができる電子プロジェクトやその他のプロジェクトに取り組むかもしれません。

これは、構築可能なスタイルシートの拡張機能のように見えます。また、Chromeブラウザーにも限定されているため、この点で「遅れ」にしたブラウザはそこから開始する必要があります。

ここでジャスティンのアイデアを試しました：

CSSモジュールのインポートから得たものを記録すると、CSSStylesheetです。

実際にスタイルを使用したい場合は...それはあなた次第です。ジャスティンのアイデアは基本的にスタイルを単一のコードとして適用します。これは、lit-htmlサポートCSSStylesheetをサポートするためです（これらのドキュメントはこれを明示的に述べていませんが、ある時点で説明すると思います）。ネイティブのWebコンポーネントの場合、違いはそれほど多くありません。それをインポートし、CSSStylesheetを取得してから、それをWebコンポーネントに適用します。

 this.shadowroot.AdoptedStylesheets = [mycssstylesheet];

これのすべての意味は次のとおりです。

• JavaScriptにStyleSheetsをインポートする方法が必要です。これは基本的に私が知っている最初の本当に明確な方法です。
• 今、私たちが望むなら、私たちはCSSへのプログラム的なアクセスを動作させることができます、
• Webコンポーネントの使用には特に適していますが、普遍的です。スタイルシートができたら、好きなように使用できます。

以上がCSSモジュール（ネイティブのモジュール）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。