記事情報殿堂入り企業

ライブラリを使わずここまでできる!Web Componentsで近未来のフロントエンド開発

ライブラリを使わずここまでできる!Web Componentsで近未来のフロントエンド開発

Cacooチームエンジニアの川端です。普段はCacooのエディター(編集画面)のフロントエンドの開発をしております。最近パパになったので娘の写真を親に共有するアプリを作ってみました。その際に、Web Components [...]...

更新日: 2018-03-14
記事の見出し
  • ライブラリを使わずここまでできる!Web Componentsで近未来のフロントエンド開発
  • 目次
  • Web Componentsとは?
  • まだ未サポートなブラウザもある
  • Web Componentsを構成するAPI群
  • 1. Custom Elements – 好きなタグ名の要素を作成する機能
  • CustomElementsのライフサイクルイベント
  • constructor()
  • connectedCallback()
  • disconnectedCallback()
  • attributeChangedCallback(attributeName, oldValue, newValue, namespace)
  • adoptedCallback(oldDocument, newDocument)
  • 2. Shadow DOM – 要素を影に隠しこむ機能
  • CSSカスタムプロパティで外からShadow DOMのスタイルを変更する
  • slot要素でShadow DOMに中身を入れ込む
  • 3. ES Modules – 外部JSファイルを動的に読み込む機能
  • 4. HTML Templates – 要素をテンプレートとして扱う機能
  • 組み合わせてサムネイルコンポーネントを作る – Custom Elements + Shadow DOM + ES Modules
  • 実際に使ってみてDOM要素の取り回しに課題あり
  • 外部からイベントを設定しづらい
  • 内部のDOM要素の取り回しが煩雑
  • まとめ – 今後の動向に期待
テックブログ情報
ライブラリを使わずここまでできる!Web Componentsで近未来のフロントエンド開発
ブログNulab Inc.
ブログ概要ヌーラボのテックブログです
会社名Nulab Inc.
会社概要