Web Componentsでカルーセルギャラリーを作る─Web Components実践編
この記事は、連載「基礎からわかる Web Components 徹底解説 〜仕様から実装まで理解する〜」の第2回目になります。 カルーセルギャラリーをコンポーネント化する Web Componentsによってスコープが実現したものの、コンポーネント化する難しさは変わりません。分割しすぎればHTML ImportsによるHTTPリクエストが必然的に増加し、パフォーマンスへ懸念が残ります。コンポーネント化した要素のどの部分を変更可能にするかなどの、汎用性についても悩ましいところです。 複数の写真をコンパクトなスペースで表示するUIとして、カルーセルギャラリーはよく見かけるUIです。これを実装するには、例えばカルーセルを構築するためのJavaSciriptの処理、及びそのCSSを既存のHTMLに追加する必要があります。 カルーセルギャラリーを構成するためのjQueryのプラグインなどは多数配布さ
Web Componentsを構成する4つの仕様 ー Web Components基礎編
我々Web開発者がWeb Componentsという言葉を耳にしてから、もう2年程経ったでしょうか。Web Componentsが変えるWeb開発の未来という記事に、「今のWeb開発がどのような課題を抱えているか、それをWeb Componentsがどう解決するか」を書きました。これを踏まえて、本連載ではWeb Componentsの仕様から実装、PolymerやX-TagといったWeb Componentsを支えるライブラリなどの周辺知識まで解説していきます。 Web Componentsを支える4つの仕様 連載第1回目となる本記事では、Web Componentsを支える4つの仕様について解説します。Web Componentsは以下の4つの独立した仕様から構成されます。 Custom Elements – 独自のカスタム要素をユーザーが定義することを可能にする Shadow DOM
Shadow DOM: The Basics
This post relates to the old Shadow DOM v0 specs and is now out of date. Many of the concepts are the same but Shadow DOM has recently been updated to the v1 specs and some of the syntax has changed. Take a look at this excellent primer for an up to date guide on Shadow DOM v1 In my previous post, I introduced the Shadow DOM and made the case for why it is important. Today, we'll get our hands dir
Shadow DOM の仕様の概要 - Daily Hacking
前回の Custom Elements に引き続き, Web Components の概要をまとめていく. Shadow DOM 仕様 Shadow DOM 概要 Shadow DOM は補助的な DOM ノードのツリーである. このツリーは要素に関連付けることができるが, その要素の子ノードとして表示されるのではなく, 代わりに Shadow DOM は独自のスコープを形成する. 例えば Shadow DOM ツリーは, それを含むドキュメントと切り離されているため, ドキュメントに含まれる id やスタイルと重複する id やスタイルを含むことができる. Shadow DOM は createShadowRoot メソッドの呼び出しによって適用される. このメソッドは DOM ノードを追加することができる ShadowRoot を戻す. Shadow DOM と関連付けられた要素は s
Shadow DOM 201: CSS とスタイリング - HTML5 Rocks
Stay organized with collections Save and categorize content based on your preferences. Explore our growing collection of courses on key web design and development subjects. An industry expert has written each course, helped by members of the Chrome team. Follow the modules sequentially, or dip into the topics you most want to learn about.
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
