• HTML Imports - Web Components を構成する技術

    この記事は webcomponents.org の記事とのクロスポストです。

    TemplateShadow DOMCustom Elements を使うことで、機能ごとの UI コンポーネントが実現できるようになることはこれまでに説明してきました。しかし、それらを使ったコンポーネントの HTML、CSS、JavaScript を別々に呼び出すのは、非効率です。

    依存関係の解決も容易ではありません。jQuery UI や Bootstrap を思い出して下さい。JavaScript、CSS、Web Font といった各種リソースを、必要に応じて別々のタグに記述しなければなりませんでした。特にタグごとにコンポーネントとして扱うことが想定されている Web Components の場合、状況が複雑化することは簡単に想像できます。

    これらのリソースを、ひとつの HTML ファイルにまとめてロードできるのが、HTML Imports です。

    Read more...

  • Custom Elements - Web Components を構成する技術

    この記事は webcomponents.org の記事とのクロスポストです。

    HTML は言うまでもなく、ウェブページを構成する最も重要な要素です。しかし、提供される機能が低レベルなため、複雑なコンポーネントを作ろうとすると、途端に div だらけの分かりにくい構造になってしまいがちです。例えば、あなたが必要な機能を盛り込んだ独自のコンポーネントを作れるとしたらどうでしょう?例えばそのコンポーネントに、機能を的確に表すタグ名を付けられるとしたら?既存のタグを拡張して、新しい機能を追加できるとしたら? Custom Elements は、それを可能にします。

    Read more...

  • Shadow DOM - Web Components を構成する技術

    この記事は webcomponents.org の記 事とのクロスポス トです。

    Shadow DOM を利用すると、DOM 要素に、ウェブページの他の部分とは切り離された、 ノード内だけで有効なスタイルやマークアップを含んだ DOM ツリーを追加することがで きます。この記事と動画では、この Shadow DOM について解説します。

    Read more...

  • Template - Web Components を構成する技術

    この記事は webcomponents.org の記事とのクロスポストです。

    先日 Web Components を構成する技術のひとつである Templates に関するビデオを公開 しましたので、解説したいと思います。

    Read more...

  • Chrome のセッションを追跡する拡張機能: Project Tab Manager 3.0 公開

    彼女ができる Chrome Extension として局地的に一瞬話題になっ た Project Tab Manager が 3.0 になりました。

    Read more...