Lightning Web Componentsの開発者ガイドの「コンポーネントアクセシビリティ」と「ライフサイクルフック」のところ。
コンポーネントアクセシビリティ属性
スクリーンリーダーや他の支援技術でコンポーネントを使用できるようにする方法についてです。title、ARIA、roleがどういうものかを確認できました。
フォーカスの処理
tabindexに関する記載がまとめられています。このあたりも意識しておくと良いみたいです。
ライフサイクルフロー
作成から表示までのコンポーネントライフサイクルのフローについてまとめられています。この図はこういうものってぐらいですが、以降の内容はチェックが必要そうな内容でした。
コンポーネント作成時のコードの実行
constructor()メソッドに関する説明があります。このメソッドがLWCの最初に実行される内容とのこと。constructor()では属性をホスト要素に追加するのはNGとのことです。作成時を除けば、どのステージでもホスト要素に追加OKとのこと。
DOM のコンポーネントの挿入時または削除時のコードの実行
次の２つに関する説明がまとめられています。
- connectedCallback() ライフサイクルフックは、コンポーネントが DOM に挿入されると起動します。
- disconnectedCallback() ライフサイクルフックは、コンポーネントが DOM から削除されると起動します。
コンポーネント表示時のコードの実行
コンポーネント表示時に処理を実行する方法がまとめられています。
- renderedCallback() は、Lightning Web Components 独自のフックです。コンポーネントの表示フェーズが完了したら、これを使用してロジックを実行します。
コンポーネントエラーの処理
LWCのtry-catch的な話だと思います。
まとめ
LWCのアクセシビリティ属性についてとライフサイクルフローについて確認できました。ライフサイクルフローの方は「constructor」「connectedCallback」といった指定のタイミングでのコード実行の方法をチェックできたので参考になりました。
