Shoelace

ウェブコンポーネントライブラリ「Shoelace」の導入方法

2023年2月23日 by single コメントはまだありません

今回は、ウェブコンポーネントライブラリ「Shoelace」を紹介したいと思います。

ウェブコンポーネントライブラリ「Shoelace」とは

「Shoelace」は、独自のコンポーネントを独自のタグによって実装するライブラリです。

特徴

  • すべてのフレームワークで動作
  • CDNで動作
  • カスタマイズ可能なCSS
  • ダークテーマも利用可能
  • アクセシビリティを考慮したつくり
  • Reactもサポート
  • ローカライズも実装されている
  • オープンソース

導入方法

CDN

導入方法は、簡単で、提供されたリンクを読み込むだけです。

ライトテーマ

デフォルトではライトテーマとなります。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.1.0/dist/themes/light.css" />
<script type="module" src="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.1.0/dist/shoelace.js"></script>

ダークテーマ

デフォルトのライトテーマ（スタイル）以外にも、暗めのダークテーマも利用可能です。読み込みCSSを以下のようにしてください。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.1.0/dist/themes/dark.css" />
<script type="module" src="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.1.0/dist/shoelace.js"></script>

利用方法

<sl-button size="small">Click me</sl-button>

Shoelaceのタグを定義するだけです。

ただし、必ず、開始タグと終了タグを設定してください。

勝手に自己完結するようタグは利用できません。

<!-- 以下のようなコードはNG -->
<sl-input />

<!-- 常に開始と終了多義を定義してください-->
<sl-input></sl-input>

ローカライゼーション（地域言語化）

Shoelaceは多言語対応されています。

英語以外の言語に対応するには、HTMLタグにlangを設定してください。

<html lang="ja">

次に翻訳ライブライブラリを読み込んでください。

読み込むパスは以下のようになります。

@shoelace-style/shoelace/dist/translations/[lang].js

よって、日本語に翻訳するには以下のようにライブラリを読み込んでください。

<script type="module" src="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.0.0/dist/translations/ja.js"></script>

なお、利用可能な言語は以下のページを参照ください。

翻訳ライブラリを読み込むとどうなるか？

ワタシが確認したところ、明示的にメッセージが日本語になったりすることはないようです。

例えば日本語にした場合、例えば、パスワードテキストボックスの場合、パスワードを表示させるボタンにaria-label属性が翻訳されてます。

<button part="password-toggle-button" class="input__password-toggle" type="button" tabindex="-1" aria-label="パスワードを隠す">
  <slot name="show-password-icon">
    <sl-icon name="eye-slash" library="system" aria-hidden="true"></sl-icon>
  </slot>
</button>

基本的には「aria-label」属性が翻訳されます。

ライトテーマ（デフォルト）

サンプル

マウスを乗せてください
設定

HTMLコード

HTMLコードのサンプルです。日本語に翻訳しています。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
  <title>Shoelace demo(1)</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.0.0/dist/themes/light.css" />
  <script type="module" src="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.0.0/dist/shoelace.js"></script>
  <script type="module" src="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.0.0/dist/translations/ja.js"></script>
</head>
<body>
  <sl-tooltip content="ツールチップです">
    <sl-button>マウスを乗せてください</sl-button>
  </sl-tooltip>
  <sl-input type="password" placeholder="パスワードを入力してください" password-toggle></sl-input>
  <br />
  <sl-button>
    <sl-icon slot="suffix" name="gear"></sl-icon>
    設定
  </sl-button>
</body>
</html>

デモ

ダークテーマ

HTMLコード

ダークテーマを利用するにはHTMLのclassに『sl-them-dark』を指定してください。

<!DOCTYPE html>
<html class="sl-theme-dark">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
  <title>Shoelace demo(2)</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.0.0/dist/themes/dark.css" />
  <script type="module" src="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.0.0/dist/shoelace.js"></script>
</head>
<body >
  <sl-tooltip content="ツールチップです">
    <sl-button>マウスを乗せてください</sl-button>
  </sl-tooltip>
</body>
</html>

デモ

ご参考

関連ページ