Macaron | Visual component editor for Web developmentMacaron is an open-source UI design tool to create and maintain Web Components.
Open Web Components
Open Web Components Open Web Components provides guides, tools and libraries for developing web components Why Open Web Components? Smart Defaults Enjoy the peace of mind that comes from having a well-known default solution for almost everything. From linting to testing to demos to publishing - have the full experience. Awesome Generators Get up and running quickly with opinionated generators, or
adoptedStyleSheets : (*x).b=z->a+y/c
◆ CSSStyleSheet を document や shadowRoot に設定できる ◆ ShadowDOM で CSS 空間が別になって無駄が多かった部分がいい感じに書けるようになった これを使えば WebComponents を使うときに CustomElements 内のスタイルをいい感じに設定できます adoptedStyleSheets が追加されたdocument や shadowRoot のプロパティに adoptedStyleSheets が追加されています Object.getOwnPropertyDescriptor(Document.prototype, "adoptedStyleSheets") // {get: ƒ, set: ƒ, enumerable: true, configurable: true} Object.getOwnPropertyDes
[翻訳記事]マイクロフロントエンド - マイクロサービスのフロントエンドへの応用
モダンな Web アプリを異なる JavaScript フレームワークを使う複数チームで開発するためのテクニック はじめに この記事は翻訳記事です。 原著者の許可をとって翻訳・掲載しています。 原文はこちらです。 翻訳者 マイクロフロントエンドとは？ マイクロフロントエンドという言葉は 2016 年の終わりにThoughtWorks Technology Radarで言及されました。 それはマイクロサービスの考え方をフロントエンドに拡張したものです。 現在の Web のトレンドは多機能でパワフルな SPA です。 SPA はフロントエンドとバックエンドを切り離すという、マイクロサービスの考え方に基づいています。 開発をすすめていくと、特に複数のチームで管理している場合 フロントエンド層が肥大化して管理が難しくなりがちです。 これを「モノリシックなフロントエンド」と呼びます。 マイクロフロン
Scoped Custom Element Registries · Issue #716 · WICG/webcomponents
Since #488 is closed, I thought I'd open up a new issue to discuss a relatively specific proposal I have for Scoped Custom Element Registries. Scoped Custom Element Definitions Overview Scoped Custom Element definitions is an oft-requested feature of Web Components. The global registry is a possible source of name collisions that may arise from coincidence, or from an app trying to define multiple
::part and ::theme, an ::explainer – Monica Dinculescu
Updated May 18, 2020 (get it? :: ? I made a funny) Shadow DOM is a spec that gives you DOM and style encapsulation. This is great for reusable web components, as it reduces the ability of these components’ styles getting accidentally stomped over (the old “I have a class called “button” and you have a class called “button”, now we both look busted” problem), but it adds a barrier for styling and t
Shadow DOM and CSS
I love custom elements! I've been building UIs with them since Polymer 0.5 was announced in 2014. One of the things that I've questioned with custom elements has been Shadow DOM and its relationship to CSS. This page is an experiment for comparing custom elements with and without Shadow DOM. Press the buttons below and 1,000 spinners will be displayed on the page, when 'Light' is pressed the custo
Custom Element Best Practices | Articles | web.dev
Custom elements let you construct your own HTML tags. This checklist covers best practices to help you build high quality elements. Custom elements allow you to extend HTML and define your own tags. They're an incredibly powerful feature, but they're also low-level, which means it's not always clear how best to implement your own element. To help you create the best possible experiences we've put
Web Components – React
These docs are old and won’t be updated. Go to react.dev for the new React docs. See Custom HTML elements in the new docs. React and Web Components are built to solve different problems. Web Components provide strong encapsulation for reusable components, while React provides a declarative library that keeps the DOM in sync with your data. The two goals are complementary. As a developer, you are f
カスタム要素 v1 - 再利用可能なウェブ コンポーネント | Articles | web.dev
カスタム要素 v1 - 再利用可能なウェブ コンポーネント コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。 ウェブ デベロッパーは、カスタム要素を使って新しい HTML タグを定義したり、既存のタグを拡張したり、再利用可能なウェブ コンポーネントを作成したりできます。 カスタム要素を使用すると、ウェブ デベロッパーは新しい HTML タグを作成したり、既存の HTML タグを強化したり、他のデベロッパーが作成したコンポーネントを拡張したりできます。API はウェブ コンポーネントの基盤です。標準の JS/HTML/CSS のみを使用して、再利用可能なコンポーネントを作成できるウェブ標準ベースの方法を提供します。その結果、コードが減り、コードがモジュール化され、アプリでの再利用が促進されます。 はじめに ブラウザは、ウェブ アプリケーションを構造化するための
GitHub - mdn/web-components-examples: A series of web components examples, related to the MDN web components documentation at https://developer.mozilla.org/en-US/docs/Web/Web_Components.
A series of Web Components examples, related to the MDN Web Components documentation at https://developer.mozilla.org/en-US/docs/Web/API/Web_components. Please refer to our contribution guidelines before contributing. The following examples are available: composed-composed-path. A very simple example that shows the behavior of the Event object composed and composedPath properties. See composed-com
lit-htmlとバニラWeb Componentsでコンポーネントを実装する - Qiita
Web Components は現在、Chrome と Safari でポリフィルなしで使うことができます。( 参考: Can I use: Custom Elements, Can I use: Shadow DOM ) Web Components ではコンポーネント開発に適した HTML 標準の API を使って、UI ライブラリに頼らずにコンポーネントベースのアプリケーションを構築できます。ポリフィルが必要な場合には Polymer から分離した webcomponents.js があるので、今から、標準の Web Components で開発ができる環境が整っていると言えます。 今回、標準の Web Components を使ったコンポーネント開発と、それを便利にする lit-html との組み合わせを比べてみます。最後に Polymer によって拡張された Extended W
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - GoogleChromeLabs/squoosh: Make images smaller using best-in-class codecs, right in the browser.
Home
GitHub - Polymer/pwa-starter-kit: Starter templates for building full-featured Progressive Web Apps from web components.
GitHub - shprink/web-components-todo: A simple todo list built with various Web Components technologies
GitHub - GoogleChromeLabs/howto-components: Literate code examples for common UI patterns.
HowTo Components – howto-tabs | Articles | web.dev
Difference between constructor and connectedCallback in custom elements v1
