Web コンポーネントのスタイル設定ではデフォルトの属性値に依存しない

誤解しないでください。私は Web コンポーネント API のデフォルト値に対して何も反対しません。彼らに関して私が抱えている問題は、彼らが信頼できないことです。

問題

API で使用可能なオプションのリストを提供する一般的なアプローチは、TypeScript の untion タイプを使用することです。

/** The display variant for the button */
@property({reflect: true})
variant: 'default' | 'solid' | 'ghost' = 'default';

バリエーションを機能させるための基本的な CSS をいくつか示します。

:host {
  --accent-color: #0265dc;
}

button {
  cursor: pointer;
  padding: 0.5rem;
}

:host([variant='default']) button {
  border: solid 1px var(--accent-color);
  background-color: white;
  color: var(--accent-color);
}

:host([variant='solid']) button {
  border: solid 1px var(--accent-color);
  background-color: var(--accent-color);
  color: white;
}

:host([variant='ghost']) button {
  border: solid 1px transparent;
  background-color: transparent;
  color: var(--accent-color);
}

注: コード例では Lit を使用していますが、ここで説明する原則は他のライブラリやフレームワークにも簡単に適用できます。

課題は、カスタム要素/Web コンポーネントがどこでも使用できることです。これらは、PHP などのサーバーサイド言語で文字列として DOM に挿入でき、JavaScript の createElement 関数で作成したり、標準の HTML で作成したりすることもできます。私が言いたいのは、カスタム要素の属性が正確に設定されていることを保証する「タイプセーフ」な方法が必ずしも存在するとは限らないということです。このため、コンポーネント ライブラリの PR チェックリストの項目の 1 つは次のとおりです:

✅ 属性とプロパティは、設定、設定解除、または設定が不十分な場合でも機能します。

API のテスト

これらのガイドラインを踏まえて、上記の API 設定をテストしてみましょう。

• 設定 - すべてがうまくいきました。

<my-button variant="default">Default Button</my-button>
<my-button variant="solid">Solid Button</my-button>
<my-button variant="ghost">My Button</my-button>

• 未設定
  • 属性を設定しなくても、デフォルト値があり、属性が設定されたときに要素にその属性を反映するように設定されているため、正常に動作します。
  • バリアント プロパティを未定義に設定すると、スタイルが壊れます。

<!-- No attribute set -->
<my-button>No Attribute Button</my-button>

<!-- JSX example -->
<my-button variant={undefined}>Unset Button</my-button>

• 設定が不十分です - バリアント属性を「ゴミ」に設定すると、やはり壊れます。

<my-button variant="rubbish">Rubbish Button</my-button>

この例はここでテストできます:

APIの修正

これを修正する最も簡単な方法は、ボタン要素のスタイルをデフォルトのスタイルと一致させることです。

button {
  border: solid 1px var(--accent-color);
  background-color: white;
  color: var(--accent-color);
  cursor: pointer;
  padding: 0.5rem;
}

これで、デフォルトのバリエーションのコードを削除できます。

/* We can remove this */
:host([variant='default']) button {
  border: solid 1px var(--accent-color);
  background-color: white;
  color: var(--accent-color);
}

混乱を避けるため、スタイルをそのままにしてコメントを追加できます。

/* Styles for this variant are under the `button` element */
:host([variant='default']) { }

また、TypeScript API を更新してオプションにし、デフォルト値を削除しましょう。

/** The display variant for the button */
@property({ reflect: true })
variant?: 'default' | 'solid' | 'ghost';

値が設定されている場合でも、設定解除されている場合でも、または設定が不十分な場合でも、要素は一貫して動作するようになりました!

最終的なコードはここで確認できます:

結論

デフォルト値への依存関係を削除することで、より回復力のある Web コンポーネント API を作成できます。コンポーネントが正しく機能するためにデフォルト値が必要な場合は、必ずこの記事を参照して、一貫して動作する Web コンポーネントを作成してください。

以上がWeb コンポーネントのスタイル設定ではデフォルトの属性値に依存しないの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。