WebComponentsへの気持ち - console.lealog();
この記事では、 ReactやVueではなくWebComponentsだけを使いたい気持ちを胸に、とある社内プロジェクトをやってみての学び 巷にあふれるWebComponentsに対する見方への違和感 についてメモっておきます。 ただ「WebComponents」の語がもつ意味をきっちり定義してるわけではないので、そのへんは雰囲気で察してください。 そのせいで勘違いされがちな概念なんかも、知らんけど。 まずは巷にあふれる意見に対する気持ちから。 (React|Vue|Xxx)はもう古い、これからはWebComponentsだ！ 勝手なイメージですが、こういう認識の人いるよね・・？ 個人的には、「いや、WebComponentsはそういう技術じゃない」と思った・思ってます。 以下、ReactもVueもAngularも「ウェブアプリケーションを作るための技術」であるが、WebComponents
続・JSフレームワークの末端がWebComponentsになるのか、なれるのか、検証してみた - Qiita
やりたかったこと： Reactから子に関数参照を渡すのを綺麗に実装したい 前回からの変化 lit-extended を使えば、テンプレートにコールバックを渡せることを知った 子に対して関数参照を渡すのではなく、 CustomEvent を生成するようにして dispatchEvent するようにした 一旦変換用のイベント定義辞書を渡すようにした WebComponent定義 /* @flow */ import { html, render } from 'lit-html/lib/lit-extended' type Props = { onClick?: Function, text: string } const template = (props: Props) => { return html` <button on-click=${props.onClick}>${props.
The State of Web Components
2017年9月24日に開催された HTML5 Conference 2017 の「The State of Web Components」のセッション資料です。
Web Components 周辺の仕様とか 2017年秋
2017.09.12 Web Components 周辺の仕様とかブラウザ互換性 2017年秋 二週間後の素振り入ってます、連投ですが悪しからず。Web Components v0 から Web Components v1 へのアップデートに関しては、去年の DevFest Tokyo 2016 で発表した Web Components 2016 & Polymer v2 にまとめてあるが、それを改めて見直している。 HTML Templates HTML Templates は HTML ドキュメントに埋め込まれてもコピーして使うまで非活性であるような、本来的な雛形の機能を実現する <template> 要素の仕様である。 <script type="text/template">...</script> やら <div style="display: none">...</div> や
Hayato.io
Hayato.io This Page Is Under Construction - Coming Soon! Why am I seeing this 'Under Construction' page? Related Searches: Accident Lawyers Top Smart Phones Anti Wrinkle Creams find a tutor Best Mortgage Rates Trademark Free Notice Review our Privacy Policy Service Agreement Legal Notice Privacy Policy|Do Not Sell or Share My Personal Information
Polymer 1.0をさわってみて - console.lealog();
さて、ここにこういうサイトがあります。 nodefest.jp 実はこのサイト、噂のPolymerの1.0をふんだんに使ってます。 というわけで、そんなそこまでがっつり使い込んだわけではないですが、知見らしいものが一応たまったので・・。 まだ見ぬ未来のポリマリストのために書いておきます。 Polymer Starter Kit github.com こういうのがありまして。 とりあえずcloneしてきてビルドすればそれっぽい雰囲気はすぐにつかめると思うので、さわってみたい人はここからはじめると良さそうです。 Gulp まずは外堀から埋めていきます。 # localhost:3000 で開発(ビルドしない) gulp serve # localhost:3000 で開発(ビルドしたものは`dist`配下に) gulp serve:dist # ビルドするだけ(`dist`配下に) gulp
[deprecated] 今Polymerに乗っかると危ないと思う4つの理由
[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%2Fcdn.qiita.com%2Fassets%2Fqiita-fb-2887e7b4aad86fd8c25cea84846f2236.png)
ReactとCSS
Reactを少しずつ使い始めていて、コンポーネント指向でコードを書いていけるところが自分の経験だとDelphiのような感じでとても良い。 JavaScriptとHTML(JSX)を1つのスクリプトにまとめることができたのは良いのだけど、そうするとやはりCSSも一緒にまとめたくなってくる。 それでReactとCSSについていくらか調べてみた。ちなみにElectronで動作すれば良いので、Blinkのことしか考えていない。 CSS in JS そもそもReactでCSSは普通どういう風に書くのか調べてみた。 React.js + CSS React: CSS in JS ひとつのやり方ではあるけども、style属性に一つ一つ指定していく方法。 辛くない？疑似要素は？疑似クラスは？継承してもらいたいプロパティとかもあるんだけどな〜 scoped CSS せっかくコンポーネントにするのだし、CSS
脱PolymerなWeb Componentsデザパタ - ジンジャー研究室
はじめに 今朝話題になっていたWeb Componentsの基本的な使い方・まとめ に触発されてみる。 すごい…！私にはこんな緻密な資料は書けないorz だけど何か書きたい。書くぞ。 そろそろWeb Componentsしたい Web開発に革命をもたらすと噂のWeb Componentsだが、そろそろプロダクションへの導入を検討したい。 2014年12月現在、Chrome 36+で全機能が使えるので、デモ画面や開発（テスト）ツールでは既にPolyfillなしで色々出来る。積極的に遊んでみたい。 とはいえ、現状と言えばWeb Componentsに関する情報は紹介記事がほとんどで、あまりプラクティカルな領域に踏み込めていない感がある。まあそんなものは実際に使い始めればわんさか出るので、別にその時になってからでも良いのだが、せっかくなので戦略の一つや二つ練っておきたい。 もうひとつ、Googl
Web Componentsのアクセシビリティ
Editor's NotesWeb Componentsでは、1度書いたコンポーネントが再利用されます。なので、コンポーネントのアクセシビリティが、そのアプリなりサイトなりのアクセシビリティに大きく影響してきます。そう、コンポーネントのアクセシビリティが重要です。この時重要になるのは、アクセシビリティが高い、良いコンポーネントを選ぶこと、もしくは、良いコンポーネントを作ることです。Web Componentsでは、1度書いたコンポーネントが再利用されます。なので、コンポーネントのアクセシビリティが、そのアプリなりサイトなりのアクセシビリティに大きく影響してきます。そう、コンポーネントのアクセシビリティが重要です。この時重要になるのは、アクセシビリティが高い、良いコンポーネントを選ぶこと、もしくは、良いコンポーネントを作ることです。もう少し噛み砕いてしゃべると もしコンポーネントのアクセシビ
DEFGHI1977のWEB技術まとめ・ツール等
written by DEFGHI1977 [重要] auonenetホームページ公開代理サービス終了に伴い、公開済みの各種ドキュメントをxdomainサーバーに移行しました. 旧アドレスへのアクセスは本ページにリダイレクトされます. お手数ですがブックマークやリンクなどのURL参照先の更新・変更をお願いいたします. You were redirected from old "dion(auonenet)" page which had been out of service. Please update URL settings of your bookmarks, links or more. Thank you. 突貫工事で作ったため, 抜けがあるかもしれません. ゲームツール等(game tools) 悪魔城ドラキュラHoD(Castlevania HoD)・アイテム早見表(Cas
Web Components使うときにハマったポイント3つ
「ブクマばっかしてても手を動かさなきゃ嘘になるぜ」と言われたような気がしたので、ウェッブコンポーネンツを使って、x-markedという要素を作ってみた。x-markedタグの中にMarkdownテキストを書くとHTMLにレンダリングしてくれる。 作ってるときにハマりポイントがいくつかあったので記しておく。 デモ: nakajmg.github.io/x-marked/ ソース: github.com/nakajmg/x-marked ハマりポイント3つ ハマったポイントは以下の3つ。 インポートされたHTMLが指すdocumentオブジェクト <template>に書いた<link rel="stylesheet">の扱い <content>の中身を取るタイミング インポートされたHTMLとインポートしているHTML内でのdocument <link rel="import">で読み込んだ
Polymer と Web Components の違い9選（もとい Polymer の便利機能）
違い、または付加機能 色々な周辺事情で、勢力を広げつつある Polymer さん。（つい最近、それに加担したような気もする） 「どこまでが Web Components で、どこからが Polymer なのか」を理解するためにもPolymerの機能をメモる。Polymer は色々なことを便利にしてくれるライブラリであり、差分を言い出すとキリがないので主要なポイントだけ。 <template> が自動で Shadow DOM に放り込まれる Shadow DOM内の <link> をインラインの <style> に展開 repeat のサポート {{interpolate}} のサポート <element> のかわりを <polymer-element> としてサポート on-click とかイベントハンドラの宣言 this.$ による idが付加された要素のコレクション observe に
Web Componentsが変えるWeb開発の未来
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を操作してインタラクションを付与してきました。 しか
Web ComponentsのWebブラウザ別動作を調べてみた
Web Componentsでは、標準技術として幅広いWebブラウザで利用可能とすべく、Polyfillという名の「未対応Webブラウザ向け実装」が開発され、すでに利用可能です。このPolyfillを使うことで、Chromeだけでなく、Firefox、Opera、そしてIEでもWeb Componentsを動作させることができます。 では、実際どこまでPolyfillでWeb Componentsが動作するのでしょうか？Polyfillとして適用するのは、もちろん platform.jsです。これを使って、複数のWebブラウザで動作検証をちょっとしてみようと思います。試してみたのは、以下の3つです。 基本的なWeb Componentsの動作確認 HTMLElement#createShadowRoot()の動作確認 Shadow DOMのCSSスコープ それぞれ見ていきましょう。 基本的
HTML Importsで読み込まれたドキュメントからの相対パスを得る - Webtech Walker
x-sushiyukiというsushiyukiを表示するためのWebComponentsの要素を作ったんだけれども、importされたファイルからの相対パスでsushiyukiの画像パスを指定するのにちょっと苦戦した。 たとえば、 /index.html から以下のように x-sushiyuki.html を呼び出す。 <link rel="import" href="bower_components/x-sushiyuki/x-sushiyuki.html"> この x-sushiyuki.html に CustomElement で<x-sushiyuki>を登録する処理などがかかれているので、 /index.html では次のように<x-sushiyuki>が使えるようになる。 <x-sushiyuki type="uni">うに</x-sushiyuki> このようなコンポーネント
Custom Elements: HTML に新しい要素を定義する - 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.
Learn web development | web.dev
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.
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
私が WebComponents ｵﾈｰｻﾝ です
Web Components で 社内 UI ライブラリを作っている 話
