再利用可能なアバターWebコンポーネントの作成

このアバターコンポーネントはWebコンポーネントです.それは昨年にわたって、より多くのブラウザサポートを得ていたように思われるnewish技術です.それは、より大きな組織または野心的なプロジェクトのために再利用可能性問題を解決することを目的とします:開発者にすべてのJSフレームワークと互換性がある構成要素を使用させること.結局のところ、彼らはネイティブのJavaScriptです.つまり、それぞれのフレームワークに対してコンポーネントライブラリを必要としないことを意味します(例えば、反応、角度、vue、svelteの別のライブラリはありません)、Webコンポーネントでそれを行うことができます.Webコンポーネントをコンポーネントライブラリに非常に適しています.
では、一つのコンポーネントを作りましょう.私は、私がこのブログ柱で作った化身コンポーネントを再現するつもりですhttps://marcoslooten.com/blog/creating-avatars-with-colors-using-the-modulus/ ) Webコンポーネントに変換します.これは、次のようになります.

新しいWebコンポーネントを作成する

Webコンポーネントにはフレームワークがありますが、バニラJavaScriptだけでビルドする予定です.あなたはそれを'アバター'と命名する誘惑されるかもしれません、しかし、それは実は無効な名前です.ネイティブHTML要素からのより良い分離を許可するには、Webコンポーネントにダッシュを含める必要があります.ダッシュを含むHTML要素が存在しないことに注意してください.ダッシュを視覚的な手がかりにすることができます.その時、カスタムアバターと呼びましょう.動いて!
最初に、HtmlElementを拡張する「Customavatar」クラスを作成します.拡張モジュールは、htmlelementに付属するすべての機能へのアクセスを必要とするために必要です.クラスの後に、特定の名前(' Customer Avatar ')とあるクラス(' CustmaVaatar ')との新しいカスタム要素があることをブラウザに伝える必要があります.

class CustomAvatar extends HTMLElement {}
window.customElements.define('custom-avatar', CustomAvatar);

クラス名(Custamavatar)は、任意の名前を指定できますが、カスタム要素と同じ名前を使用する慣例ですが、ケバブの代わりにパスカルケース(各単語が大文字)でキャッシュされます.タグをHTMLに追加できます.<custom-avatar></custom-avatar> . まだ見るものはない.アバターのようにしましょう!

WebコンポーネントへのHTMLとCSSの追加

Custmavatarクラスの内部で、コンストラクタを使用します.このメソッドは、コンポーネントが初期化されたときに呼び出され、マークアップとスタイリングに使用できます.また、htmlelementからすべてのメソッドとプロパティを継承するために必要なSUM ()をコールします.

class CustomAvatar extends HTMLElement {
  constructor() {
    super();
  }
}
window.customElements.define('custom-avatar', CustomAvatar);

次に、シャドウDOMを使用します.これはWebコンポーネントのカプセル化された部分です.Webコンポーネントのみが変更できます.つまり、Webコンポーネントはその環境の影響を受けません.私のウェブコンポーネントの中にH 1タグを持っていると言いましょう<style>h1 { background: hotpink}</style> . 周りのページがスタイリングでH 1を持っているとしても、それは私のウェブ構成要素(そして、他の方法のまわりで)のH 1に決して影響しません.
今楽しみが始まり、我々は影のDOMにマークアップを追加することができます.私は、各ステップが何をするかについて説明するコメントを加えました.

class CustomAvatar extends HTMLElement {
  constructor() {
    super();

    // Enable the shadow DOM for this component
    this.attachShadow({ mode: 'open' });

    // Create a HTML template (this is a special tag which can hold markup)
    const template = document.createElement('template');

    // Set the innerHTML to the actual markup we want
    template.innerHTML = `<div class="avatar"></div>`;

    // Create a style element
    const styles = document.createElement('style');

    // Inside the style element, add all the CSS
    styles.textContent = `
    .avatar {
      width: 52px;
      height: 52px;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: hotpink;
      border-radius: 50%;
      font-family: sans-serif;
      color: #fff;
      font-weight: bold;
      font-size: 16px;
    }
    `;

    // Append the style element to the shadow DOM
    // shadowRoot is the wrapper of our component
    this.shadowRoot.appendChild(styles);

    // Take the template contents, and copy them to the shadow DOM
    this.shadowRoot.appendChild(template.content.cloneNode(true));
  }
}

今、あなたはページにピンクの円を見るべきです.我々はどこかになっている!

ユーザーデータを渡す属性を追加する

propsや@ input ()の代わりに、反応や角度のようなフレームワークを使用している場合は、通常のHTML属性を使用してデータをコンポーネントに渡します.このようなアバターを使うことができるように、イニシャルが必要です.<custom-avatar initials="MJ"></custom-avatar> . これを行うと、JavaScriptを使用して属性にアクセスできます.this.getAttribute('initials') . Webコンポーネントの例では、このメソッドを使用してコンストラクター内の属性を取得できますが、これは悪い習慣です(ここで参照).https://html.spec.whatwg.org/multipage/custom-elements.html#custom-element-conformance ). それをするより良い考えconnectedCallback , コンポーネントの読み込み時に呼び出されます.
さらによいattributesChangedCallback . このメソッドは、属性が更新されるたびに呼び出されます.幸運にも、コンポーネントが最初にロードされるとき、それらも変わります.属性の初期値はnull そして、準備ができたら、それは提供された属性値にそれらをセットします.attributesChangedCallback つの引数、name、oldvalue、newvalueを取ります.私たちに最適!初期値を取得するのに良い場所ではありませんが、値が変更された場合にも再度実行されます(そして、私たちのアバターのための新しい色を取得する必要があります).コンストラクタの外側に次のコードを追加します.

// This is our code to generate a color code from a string
// For more info, see the blog about this technique:
// https://marcoslooten.com/blog/creating-avatars-with-colors-using-the-modulus/

getColorFromText(text) {
  const colors = ['#00AA55', '#009FD4', '#B381B3', '#939393', '#E3BC00', '#D47500', '#DC2A2A'];
  const charCodes = text
    .split('')
    .map(char => char.charCodeAt(0))
    .join('');
  return colors[parseInt(charCodes, 10) % colors.length];
}

// This static get is needed to tell our component which attributes to watch
// If you don't provide this, it won't work
static get observedAttributes() {
  return ['initials'];
}

// This will run only when our 'initials' attribute changes
attributeChangedCallback(name, oldValue, newValue) {
  // But for future-proofing, I'd like to check anyway
  if(name === 'initials') {
    // Get the avatar div from the shadow DOM:
      const avatar = this.shadowRoot.querySelector('.avatar');
        // Set the text to the attribute value:
      avatar.innerText = newValue;
        // And set the background color to the color from the getColorFromText method
      avatar.style.backgroundColor = this.getColorFromText(newValue);
  }
}

Webコンポーネントの作り方

今、あなたは簡単なWebコンポーネントを作る方法を知っている!HtmlElementを拡張し、カスタム要素を持っているDOMを伝えるクラスを作成することから始めました.次に、コンストラクタでは、デフォルトのマークアップとフォールバックの背景色を持つコンポーネントの初期設定を行います.私たちは、あなたがすでによく知られているかもしれないかなりの時間の間存在したDOMメソッドを使用しました.最後に、Webコンポーネントの組み込みライフサイクルメソッドの1つを使用しました.この場合、AttributeChangedCallbackは、属性のいずれかを設定したり更新したりします.
私はWebコンポーネントを見ていたとき、私はそれがいかに簡単だったかに驚いた.それは全体のフレームワークに匹敵するものではなく、角度や反応よりもずっと速く学ぶことができる比較的小さなAPIです.しかし、あなたがちょうど始めるならば、構文は少し不明瞭に感じることができます.また、DOM操作( QuerysElector , CreateElement , InnerHTML , Innertext ,そのようなものなど)によく精通しているなら、本当に役立つでしょう.Webコンポーネントの書き込みを開始すると、たくさんのことがあるからです.
最後に、それは学習価値があるかもしれません.私はいくつかの大企業がますますこの技術を採用しているのを見ている.フレームワークを使用しても、チーム間でコンポーネントを共有できます.それは多くの大きな勝利です.3つのコンポーネントライブラリを最新のコンポーネントを保持しなければならないことを想像してください.
Webコンポーネントの詳細については、次のリソースをチェックアウトすることをお勧めします.
The Ultimate Guide to Web Components
Lifecycle Hooks in Web Components
webcomponents.org