component template

component-name

のウェブコンポーネント…

デモ|さらに読む

例

一般的な使用例：

 < script type =" module " src =" component-name.js " > </ script >

< component-name >
  < button > Button </ button >
</ component-name >

フォールバック方法を使用した例：

 < script type =" module " src =" component-name.js " > </ script >

< component-name >
  < button > Button </ button >
  < a href =" # " > Anchor </ a >
</ component-name >
< style >
  component-name:not(:defined) button,
  component-name:defined a {
    display: none;
  }
</ style >

オプションまたは追加のフォールバック方法を使用した例：

 < script type =" module " src =" component-name.js " > </ script >

< component-name attribute =" value " >
  < button > Button </ button >
</ component-name >
< style >
  component-name[attribute="value"] {
    outline: 1px solid red;
  }
</ style > 

特徴

このWebコンポーネントを使用すると、次のことができます。

• チェックしてください…

インストール

いくつかのオプションがあります（これらのいずれかを選択してください）：

1. NPM経由でインストール： npm install @daviddarnes/component-name
2. GitHubからプロジェクトに手動でソースをダウンロードします。
3. この手順をスキップし、サードパーティのCDNを介してスクリプトを直接使用します（生産の使用にはお勧めしません）

使用法

プロジェクトに<script>を含めることを確認してください（これらのいずれかを選択してください）。

 <!-- Host yourself -->
< script type =" module " src =" component-name.js " > </ script > 

 <!-- 3rd party CDN, not recommended for production use -->
< script
  type =" module "
  src =" https://www.unpkg.com/@daviddarnes/[email protected]/component-name.js "
> </ script > 

 <!-- 3rd party CDN, not recommended for production use -->
< script
  type =" module "
  src =" https://esm.sh/@daviddarnes/[email protected] "
> </ script > 

クレジット

次の人々に感謝します：

• このWebコンポーネントのレポンテンプレートを刺激してくれたZach Leatherman