先取り、Shadow DOM | 第1回 Shadow DOMが生まれた理由
先取り、Shadow DOM 第1回 Shadow DOMが生まれた理由 このシリーズではShadow DOMのコンセプトから実装例まで解説します。第1回目は、なぜShadow DOMという考え方が必要になってきたのか？という背景と、Shadow DOMの概念を解説します。 はじめに Shadow DOMとは、複雑化していくWebアプリケーション開発への取り組みを助けるためにGoogleから提案されているWeb Componentsと呼ばれる一連のコンセプトに繋がる仕様の一つです。 この記事を書いている2012年9月現在、まだW3C草案として公開されている段階であるため、随時更新されるか、他の仕様に置き換えられてしまうこともあるかもしれません。ですが、とても興味深い仕組みなので、現時点での情報を元に、ここで紹介をしてみたいと思います。 現状の問題点 Shadow DOMの概念をあれこれ説明
Chrome で試せる Shadow DOM - text.funenPlaCanen.com
Chrome の about:flags に “Shadow DOM を有効にする” という項目が出来ている。たぶん、バージョン 19 くらいから。 Shadow DOM というのは W3C WebApps Working Group の方で提案されている Web Components と呼ばれる、 HTML をうまく部品化する仕組みを構成する要素の一つで（言葉使いとかあってるか微妙。）ブラウザを通じて Web サイトのレンダリングを行った際に現れる見かけ上の文書ツリー。 あくまで見かけ上であり、実際には Shadow DOM はそれを保持している文書ツリーとは別の空間に存在していて、Shadow DOM には Shadow DOM のルート要素的なものがある。そのため文書ツリー側で定義したスタイルは適用されないし、Shadow DOM 内で定義したスタイルも文書ツリーには影響しないなどの
Introduction to Web Components - DOM ECMAScripting
テンプレートとして HTML 断片または DOM 部分木を用いるには、大きく 2 種類の方法が考えられます。1 つは文字列としてテンプレート出力する方法。これは DOM API に不慣れな人にも分かりやすい反面、セキュリティ問題を引き起こしやすいデメリットがあります。例えば、次のように ul 要素を出力するコードがあるとします。 var attr = 'sample.html'; var text = 'サンプル'; document.getElementById ('result').innerHTML = '<ul>' + '<li><a href="' + attr + '">' + text + '<\/a><\/li>' + '<\/ul>'; 一見してお分かりのように、もし変数 attr に "、<、>、& が含まれていたら、あるいは変数 text に <、&、]]> が含まれ
umbrUI - CSS3 checkbox
Pictos enabled CSS3 checkboxes There was a request, so I tried. The outcome.. no JavaScript, no images and just minimal markup - but a ton of messy CSS3. And only Safari will render it properly. Chrome looks ok, but just with a fake 3D perspective. iOS has some issues with the icons and Firefox, Opera and IE.. well, I haven't tried yet. Read more details or see a screenshot. PS: If you're curious
Shadow DOM
This specification contains leftover shadow DOM-related definitions which are not yet given a more permanent home in other specifications. Not an active specification Most of the Shadow DOM specification has been upstreamed to DOM [[DOM]], HTML [[HTML]], CSS Scoping [[css-scoping-1]], UI Events [[uievents]], and other relevant specifications. What remains here is stuff which has not yet been prope
What the Heck is Shadow DOM?
If you build Web sites, you probably use Javascript libraries. If so, you are probably grateful to the nameless heroes who make these libraries not suck. One common problem these brave soldiers of the Web have to face is encapsulation. You know, one of them turtles on which the Object-Oriented Programming foundation sits, upon which stands most of the modern software engineering. How do you create
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
New community features for Google Chat and an update on Currents
Good night, Posterous