HTML Web Component using Vanilla JavaScript
Web Components have been around for a while now. Google has really been trying to push for their more widespread adoption, but most major browsers still have very little support for it, except for Opera and Chrome. However, by using polyfills, available from https://www.webcomponents.org/polyfills, you can build your own Web Components now. In this article, I’m going to teach you how to create you
Web Components: The Long Game - Infrequently Noted
Alex Russell on browsers, standards, and the process of progress. Mikeal Rogers reached out last week to talk about Web Components, which surprised me, but his follow-up blog post is essential, timely reading. Dimitri Glazkov, Alex Komoroske, and I started the project that designed and (for many years) iterated on Web Components with a few primary goals in mind: Enhance component portability Shrin
An intro to web components with otters – Monica Dinculescu
I work on a library called Polymer, which helps you write web components faster and easier. This is awesome, but it’s only awesome if you (yes, YOU) know what a web component is, and know that you want to write one. So here’s a story about what these things are and teaches you how to use them without showing you 10 pages of docs and getting you to install tools and CLIs. Maybe it’s for you. Maybe
Styled Components: Enforcing Best Practices In Component-Based Systems — Smashing Magazine
The rise of JavaScript frameworks such as React, Ember and recently Angular 2, the effort of the W3C to standardize a web-native component system, pattern libraries and style guides being considered the “right way” to build web applications, and many other things have illuminated this revolution. After this shift in mindset towards building component-based user interfaces, we are now in what we li
スーツの種類について詳しく解説！ | 理想の着こなしについて考えましょう
スーツをかっこ良く着こなしたいけど、具体的な知識がないと悩んではいませんか？ じつは数多くの種類があり、特徴を理解していないと上手に着こなせないものです。 今回は上記のお悩みを解決できるように、スーツの種類についてまとめました。 具体的には、 ・スーツの種類を解説 ・2種類のスーツセットにおける着こなしを紹介 ・ベントは3種類のスタイルが販売されている 上記の順に解説します。 初心者の人でも簡単に読める内容となっていますので、ぜひご一読ください。本記事を読み進めて、自分が理想とするスーツを着こなしましょう。 種類を解説 スタンダートなシングルスーツと、着こなす難易度が高いダブルスーツがあります。それぞれの特徴を理解して、恰好よく着こなしましょう。 スタンダートなシングルスーツ これは、前のボタンが一列のデザインを指します。ビジネスマンが着用しているものに圧倒的に多い傾向です。シンプルなデザ
Building a custom tag input with Skate.js | HackerNoon
Too Long; Didn't ReadAre you lost trying to build and use Web Components? Skate.js uses the platform and sheds some light on it. Are you lost trying to build and use Web Components? Skate.js uses the platform and sheds some light on it. What are we going to build? An input-like tag which looks like a normal text input but splits the content into tags when the users hit space. Take a look at the li
Component Interop With React And Custom Elements
July 8, 2014 Today we'll look at how to wrap React components using Custom Elements, allowing us to interop with Web Component-based libraries using the DOM as a simple configuration API. Similar to libraries like Polymer, React cares about composition, lifecycle events and modularity so seeing how well it fits with Web Components is an interesting thought experiment. As React doesn't need to take
2017年のWeb Components | gihyo.jp
※ ○＝サポート済み、△＝開発中／予定あり、×＝開発予定なし Web Componentsの構成要素すべてをウェブブラウザがネイティブサポートしているのは、ChromeとOperaのみです。その他のウェブブラウザは、部分的なサポートにとどまっています。 Web Componentsを試したい時は、実際には上記の表で掲載されたすべてのウェブブラウザで既に試すことができます。数多くの×マークがついているウェブブラウザについても、その穴を埋めてくれる機構（Polyfill）を利用することによって、Web Componentsを試すことが可能です。しかし、そのPolyfillも完全ではなく、どうしてもネイティブサポートしているウェブブラウザとの挙動の差が出てしまいますし、動作スピードについても雲泥の差が出てしまいます。 やはりWeb Componentsは、主要ウェブブラウザがネイティブサポートし
そのReactほんとに必要ですか？～もうすぐElectronで使えるようになるWeb Componentsの世界～ - SourceChord
この記事はelectronアドベントカレンダー 2016 21日目の記事です。 遅くなってしまい申し訳ありません。。。 ※アドベントカレンダーのリンクが間違っていたので修正しました・・・汗 前置き ↓去年はこんな記事を書いていました。 このCSS Grid Layout Module Level1ですが、少しずつ仕様の策定が進み、とうとう勧告候補の段階まできました。 CSS Grid Layout Module Level 1 CSS Grid Layout Module Level 1 （日本語訳） CanIUseを見ると、もうすぐFirefoxとChromeでの対応が行われるようです。 http://caniuse.com/#search=grid https://developer.mozilla.org/ja/Firefox/Releases/52 未来は意外と早く来るもんですね。
理解しておきたいコンポーネント指向 - Qiita
この記事は フロントエンドエンジニア Advent Calendar 2016 の10日目の記事です。 最近はずっとReact、Redux、CSS Modulesで開発していて、コンポーネントについて考えることが多かったので頭の中の考えをアウトプットしてみます。 それぞれのモジュール化 みなさん、次のようにモジュール化を行っていると思います。 HTML Reactなどのコンポーネント化のライブラリを使う 何かのテンプレートエンジンでパーシャルにする CSS パーツ毎にclassを作る SASSのmixinにする JavaScript 関数やクラスにする JavaScriptに関してはそれほど問題ないと思います。 ただコンポーネント化に関してはCSSやJavaScriptとセットで考える必要があったり、 CSSもパーツ毎にclassにするのがいいのかmixinにするのがいいのかといった論点が
進化するWeb Componentsの今、2016年最新情報
Web Componentsが変えるWeb開発の未来から、はや二年が経ちました。コミュニティでの議論やフィードバックを経て2016年現在、Web Componentsの仕様は大きくアップデートされています。先日行われたDevFest Tokyo 2016でもWeb Components 2016 & Polymer v2 と題してWeb Componentsの最近についてお話しました。 これまでGoogleを中心に策定されてきたv0の仕様を元に、新しい仕様はMozillaやAppleなどの各ブラウザベンダーの合意を改めてとりながら策定が進められています。今日はアップデートされたWeb Componentsの仕様を説明していきます。 基本概念については割愛しますが、えーじさんのShadow DOM – Web Componentsを構成する技術:Tender SurrenderとCustom
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - abraham/node-package: Node Package Web Component
GitHub - abraham/twitter-user: Twitter User Web Component
GitHub - abraham/twitter-status: Twitter Status Web Component
Styling is critical to web component reuse, but may prove difficult in practice - Component Kitchen
GitHub - abraham/nutmeg: Build, test, and publish vanilla Web Components with a little spice
Reading and Writing DOM in Custom Element Constructors | Slack
Material Design
Building Apps with No Code? A Web Component Future
GitHub - Wildhoney/ReactShadow: :beginner: Utilise Shadow DOM in React with all the benefits of style encapsulation.
