Three years ago, there was a lot of excitement surrounding Web Components: everybody talked about them, the frameworks Ember and Angular planned to integrate them or even be based on them, etc. By now, that excitement seems to have died down. This blog post examines what happened to Web Components. Spoiler: they are alive and well and slowly being adopted across browsers. Refresher: Web Components
Getting Started The most important method in the X-Tag library is xtag.create(). The create function on the X-Tag object is what you'll use to create new custom element definitions, which can include things like lifecycle callbacks, attribute-linked getters/setters (accessors), and event listeners. Here's what defining a simple custom element looks like with X-Tag: const Frank = xtag.create('x-fra
� �-mU p� .mU Ρ-mU з$.mU ��,mU 0��-mU �-mU ��-mU j..mU �*.mU =..mU �e�-mU �-mU ��$.mU �e�-mU �$.mU �-mU `D�-mU P2(.mU [ .mU �$.mU �� .mU �S�-mU P��'mU `F�-mU ��>.mU `� .mU Pu..mU �_�-mU @� .mU `�@-mU P @.mU 0��-mU pI�-mU ��-mU pͥ-mU �#.mU � .mU �&P-mU ���-mU �@�-mU �..mU �\ .mU ��,mU ���-mU FL-mU � �+mU �s?.mU ��@.mU �� .mU
Editor's Notes#13: Web Componentsでは、1度書いたコンポーネントが再利用されます。なので、コンポーネントのアクセシビリティが、そのアプリなりサイトなりのアクセシビリティに大きく影響してきます。そう、コンポーネントのアクセシビリティが重要です。この時重要になるのは、アクセシビリティが高い、良いコンポーネントを選ぶこと、もしくは、良いコンポーネントを作ることです。#17: Web Componentsでは、1度書いたコンポーネントが再利用されます。なので、コンポーネントのアクセシビリティが、そのアプリなりサイトなりのアクセシビリティに大きく影響してきます。そう、コンポーネントのアクセシビリティが重要です。この時重要になるのは、アクセシビリティが高い、良いコンポーネントを選ぶこと、もしくは、良いコンポーネントを作ることです。#18: もう少し噛み砕いてしゃべると
29 April 2016 Hayato left a rather flattering review comment to my pull request for integrating shadow tree event dispatch into the DOM Standard. It made me reflect upon all the effort that came before us with regards to adding components to DOM and HTML. It has been a nearly two-decade journey to get to a point where all browsers are willing to implement, and then ship. It is not quite a glacial
A practical collection of everyday Web Components Getting started A curated library of reusable Custom elements at an atomic level Carefully crafted with web standards and accessibility in mind, these custom HTML elements cover the web developer everyday needs. Simply put, these are the 'atomic parts' that will make up your application. Think of them as a system of component blueprints that are ea
Editor’s note: This is part two of a two-part series on Web Components by Microsoft Edge engineers Travis Leithead and Arron Eicholz. To read more about our viewpoint and background on web components, please see part one, “Bringing componentization to the web: An overview of Web Components.“ Yesterday, we shared our thoughts on the promise of Web Components. In this post, we’ll answer a couple of
[2015/11/10 追記] Web Components周りはだいぶ情勢が変わったのでこの記事の内容は真に受けないでください。 (コメント欄が有益なので記事は残します) Polymerというより現状のWebComponents全体がふらふらしてるので口車に乗せられると将来痛い目を見そうだと思った 半年くらい経ってブラウザベンダー間での議論がけっこう進展したので、Web Components自体は割と安泰かと思います。 Shadow DOMの仕様を満たしてない Polymerが使っているShady DOMはCustom ElementsのStylingを容易にするためにShadow DOM仕様を満たさない状態で使われています。 https://www.polymer-project.org/1.0/docs/devguide/styling.html#background the Pol
![[deprecated] 今Polymerに乗っかると危ないと思う4つの理由](https://cdn-ak-scissors.b.st-hatena.com/image/square/cbc1f0f7d57c0fbd7dc87d81bc07542c36a83eff/height=288;version=1;width=512/https%3A%2F%2Fsiteproxy.ruqli.workers.dev%3A443%2Fhttps%2Fcdn.qiita.com%2Fassets%2Fqiita-fb-2887e7b4aad86fd8c25cea84846f2236.png)
Polymer Elements のカタログページ Site: Polymer Element Catalog Repo: Polymer/polymer-element-catalog Polymer は、これからの Web 標準の一角を占めるであろう Web Components のラッパーライブラリです。その Polymer で作られたコンポーネントのカタログサイトが公開されていました。 これまでも Core Elements や Paper Elements が Polymer のコンポーネントとして提供されていましたが、分類も新たにレパートリーが拡充されています。 Cart に入れて Download カタログには各コンポーネントのドキュメントやデモが載っていて、使いたいものをチェックして Cart に入れていきます。必要なコンポーネントを Cart に入れてダウンロードさせると
あくまで可能性のはなし あまりポジティブな意味で捉えられないのでタイトルですが、あくまで可能性の話であり、直面するかもしれない問題についての一次考察って感じです。 コンポーネントが依存するライブラリの断片化 ラッパーライブラリによるロックインまたは断絶 その他の妄想 ここでは上記の3点について、つらつら書いてます。 1. コンポーネントが依存するライブラリの断片化 これまで開発者は自身がすべてのコンポーネントを管理するつもりで、ときにミニマルに、ときに富豪的に、依存するライブラリを選定していました。 いつの日か Web Components を前提にしてコンポーネントを選定するときも、個々が依存しているライブラリまでコントロールしきれるかは定かではありません。 依存関係の肥大化は避けたい 例えば npm であればさほど気にならない依存関係の肥大化も、ブラウザで実行されるコンポーネントの場合
Concept 『Web Components with Virtual DOM』 ahomu/Claylump Motivation Web Components ラッパーを書いてみたいなーと思った React の JSX がイマイチ気にくわない（JSとHTMLを一緒にするなオジサン） <template> に書いた内容を Virtual DOM 生成器に変換すればいいんじゃね というような所から人様のライブラリを借りてツギハギして習作してみた次第。借りてきたライブラリ（HTML String パーサと Virtual DOM）は独自実装しても楽しそうなので、やる気があればやる。 もちろん実験品なので、実用には耐えない Files claylump.polyfill.js（webcomponents.js + window.fetch + es6promise） claylump.run
Google I/O 2014でEric BidelmanがPolymer and Web Components change everything you know about Web developmentというタイトルで、Web Componentsおよびその補完・拡張ライブラリであるPolymerについてセッションが行われました。 「なぜWeb Componentsが生まれたのか」 「Web Componentsが何を解決してくれるか」 この2点を上記セッションに沿って解説していきます。 HTML/CSSが持つ弱点 Webを構成していくパーツを作る際、今まではどのように行っていたでしょうか。<div>や<textarea>といったようなネイティブで用意されているタグに、CSSで見た目で装飾し、JavaScriptからDOMのAPIを操作してインタラクションを付与してきました。 しか
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
