手ざわり感を残してみることにします。関する小粒な記事を投稿する予定です。完成のデモ画像とソースコードです。見ての通り、ボタンを押すと指定されたテキストがクリップボードにコピーされるコンポーネントです。CopyTextButton)それでは一つずつ簡単に解説を書いていきます。使って独自のタグを作ります。タグの名前とともに登録するだけです。要素を表すインターフェイスです。コールバックがあります。属性が変更されたときに発火これらを使ってコンポーネントのライフサイクルを操作します。よるスタイルは外部からの影響を受けたくありません。逆にコンポーネント内部のスタイルも外部に漏れ出してほしくないです。単体で使うとこのような形になります。指定すればいいという感じです。ままがいいと思います。外部配信した時、利用者側から見ると各パーツの微妙なスタイルはカスタマイズしたいというニーズも時にはあります。外部の影響を受けないのが特徴なので、そのままではスタイルの上書きはできません。疑似要素を使ってアクセスしてみます。側で指定されている要素に対してアクセス可能な疑似要素です。カスタマイズ可能な指定がされていなければ不可能です。属性を使いアクセス可能な要素と名前を指定します。疑似要素を使うとスタイルの上書きができます。コンポーネントを作っていくと、内部でコンポーネントをいくつかに分割して作ることが多いです。疑似要素では一番外側の要素にしかアクセスができません。利用することで外部に露出することができます。ファイルで構成できるのは、よほどシンプルな機能だけで実際にはいくつかのファイルに分割することになると思います。ビルドシステムを使わずとも簡単に分割できます。使えるようになります。'./module.js'something()以上が今回の習作、テキストコピーコンポーネントを構成する技術要素を簡単に解説しました。シンプルにコンポーネント志向の開発ができるのはかなり良いですね。ライブラリを経由して使うことが多いかもしれません。して利用するケースもあると思います。そこらへんはまた別の記事で紹介できればと思います。Hacking!株式会社ベーシックエンジニア募集QiitaWantedly。