Web Componentsの実践

依存ファイルはwcの中に。重複してもパフォーマンスに影響ないよ

Don't worry if that means including redundant ; as long as you set appropriate cache headers, these will only be fetched and loaded once
webcomponents.org - Discuss & share web components

設定の注入には属性を使う

Attributes for data in. Use attributes to pass configuration in

built-in要素と同様に動くのが大原則.
だから属性値による設定が大切.

Custom elements, like their built-in counterparts, should be configurable.
Custom Element Best Practices  |  Web Fundamentals  |  Google Developers

attribute, propertyの変更が要素の変更へ即座に反映されるよう

Aim to keep primitive data attributes and properties in sync, reflecting from property to attribute, and vice versa.
Custom Element Best Practices  |  Web Fundamentals  |  Google Developers

1つのコンポーネントに詰め込むのか
あるいはコンポーネントの連鎖で作るのか

styling

Componentsにどうやってスタイルをつけるか

link要素が相性よくない。CSSをlink要素で読み込むのがあまり望ましくない.
Style要素が基本.

外部CSSの場合、

@import url("url")

をStyle要素内で使えば良い。

Plus Ultra

効率の良いDOM更新がほかの大きなテーマ.
VDOMやlit-html系やら

template literals + innerHTML でWeb Componentsを作ってみると性能普通な今どきな書き方 (not 命令型 but 宣言型) ができる.

HTML/DOM/CSS

• コンポーネント
  • WebComponents
• DOM更新
  • VDOM (React etc)
  • lit-html系 (template element based?)
• data binding

• 記法 (命令型・宣言型)

  • 宣言型
    • lit-html
    • JSX

• Systematic Styling

  • Design system
    • Material Design