Macaron is an open-source UI design tool to create and maintain Web Components.
Macaron | Visual component editor for Web development
Macaron is an open-source UI design tool to create and maintain Web Components.
noteのフロントエンドApp分割
noteでの大きくなりすぎたNuxt.jsのアプリケーションを分割する取り組みについて
以下のコードで HTML 全体の CSS を取得して Shadow DOM に適用することができます。 最近まで replaceSync() と adoptedStyleSheets() の存在を知らなかったのですが、 この 2つを使うと毎回 style タグを書き出すより効率的に処理できるらしい。 これまで Shadow DOM の中に link タグを書くような方法を使っていたのですが、link タグだと最適化がしにくい問題があります。 CSS はインライン化したほうが高速なので、その時にも同じように使える方法が欲しかったのですが、この方法でいけるとわかりました。 document.styleSheets も知らなかった…。 function getGlobalCSS() { let cssText = ""; for (const stylesheet of document.sty
AI & MLLearn about artificial intelligence and machine learning across the GitHub ecosystem and the wider industry. Generative AILearn how to build with generative AI. GitHub CopilotChange how you work with GitHub Copilot. LLMsEverything developers need to know about LLMs. Machine learningMachine learning tips, tricks, and best practices. How AI code generation worksExplore the capabilities and be
自分で Svelte + TypeScript を色々と書いてみたが、情報がまとまってなかったので、ここでまとめていく。 なぜ Svelte + TypeScript か Svelte + TypeScript はセマンティクスが単純で型が付く軽量な Vue として気に入っている。ビルドが軽量で他と混ぜやすいのが特に気に入っていて、React や Vue の他のシステムに対しても、末端のコンポーネントとして混ぜやすい。Vue は歴史的経緯でデータバインディングの仕様が混沌としているが、Svelte はESM First で構文解析時の処理に仕様を寄せてるので、とてもシンプル。 webcomponents として配布するモードがあるのも気に入っている。Vue React は単体のビルドサイズが大きすぎて webcomponents の末端にするのは難しい。 やりたいこと <script la
Shadow DOMとCSSの現状
2024-02-27 DOMDOMトークス #1
HTML だけで Shadow DOM を構築するための宣言型 Shadow DOM 2024.10.19 宣言型 Shadow DOM は `<template>` 要素を使用して Shadow DOM を構築する方法です。宣言型 Shadow DOM を使用することで、従来の JavaScript を使用した Shadow DOM の構築方法と比較して、サーバーサイドレンダリング（SSR）に対応しているため、パフォーマンスの向上や SEO 対策に期待されます。 Shadow DOM は Web Components を構成する 3 つの技術の 1 つです。Shadow DOM はコンポーネントのカプセル化を実現します。Shadow DOM で定義されたスタイルは Shadow DOM の外部に影響を与えず、また外部のスタイルの影響を受けません。 Shadow DOM は再利用可能なコン
基盤チームの右京です。 BASE ではショップのデザインを誰でも簡単にできるような、いわゆるノーコードな機能を提供しています。 デザイン | BASE (ベイス) ネットショップを無料で簡単に作成 この記事では、そんなノーコードなシステムの裏側について、簡単にですが解説しています。 ショップページ配信の基盤システム ノーコードの前にまず BASE のショップページ(ShopFront と呼んでいます)がどのようなシステムかを知っておく必要があります。BASE のショップページは特定の URL にアクセスすると必要なデータをデータベースから取得し、テンプレートエンジンを使ってサーバーのプログラムで HTML を生成して返す、よくある伝統的な Web ページとして実装されています。ただし、ショップ毎にページのデザインは全く異なるため、1 つの固定のテンプレートを利用しているわけではなく、ショッ
WebComponents でログインコンポーネントをつくってサービス横断で使えるようにした話 - 一休.com Developers Blog
こんにちは。プロダクト開発部の渥美 id:atsumim です。 今回サービス横断で利用できるログインコンポーネントを WebComponents で実装したのでその紹介をします。 1. 背景 今年の2月に電話番号での会員登録及び認証機能をリリースしました。 これに伴って一休の会員基盤も刷新しました。 一休のサービスは主に、宿泊、レストラン、スパとあるのですが、 歴史的経緯により会員基盤が分散してしまっていたので、ひとつにまとめる狙いもありました。 会員基盤 Before/After その一環として、一休のサービスで横断して使えるログインコンポーネントを WebComponents で実装しました。 このコンポーネントにログインや会員登録の処理を集約し、新会員基盤へのインターフェースとするようにしました。 また、電話番号認証や2段階認証設定のモーダルも実装しました。下記が実際の画面です。
「リアクティブコントローラ」導入がもたらすかもしれないウェブフロントエンド設計の変化 | フューチャー技術ブログ
フロントエンド連載2日目のエントリーです。 あまり話題になっていないような気がしますが、Web Componentsを実装するためのフレームワークのLit-Element v3がバージョンアップして、ついでにリブランディングしてLit v2.0となりました。ロゴも変わり、ウェブサイトも新しくなりました。 Introducing “Lit” for Web Components 本当はこのLitの紹介をこの連載でしようとしたのですが、上記のウェブサイトがすごく詳しいので、単に紹介するだけの記事だとあまり価値がないので、この中のコントローラ機能のみをとりあげようと思いますが、まずはWeb Componentsとは、というところを説明します。 n回目のWeb Components元年以前次のような記事を書きました。最初のPolymerというフレームワークが推進していたころよりも、ブラウザ対応も進
再利用可能なUI部品を組み合わせて画面を構築していくのは、多くのGUIアプリケーションにとって効率の良い開発手法です。ブラウザ向けにも多くのライブラリが再利用性を担保するための工夫を重ねてきましたが、実はブラウザ自身が再利用可能なUI部品を作成するための機能を備えていることはご存知でしょうか。本記事では、Web Componentsという名称で総称されるブラウザの機能について解説します。 対象読者 AngularやReactなどのフレームワークに頼らずに再利用可能なHTMLやCSSを整備したいマークアップエンジニア AngularやReactなどのフレームワークとWeb Componentsを併用する利点を学びたいJavaScriptエンジニア 前提環境 筆者の検証環境は以下の通りです。 macOS Monterey 12.3.1 Google Chrome 100.0.4896.127
CSS in JSはJavaScriptのコード中にCSSを書くプログラミング手法で、styled-componentsなどがメジャーどころです。現代的な開発では、ReactやVueといったフロントエンド用のViewライブラリを使う際にCSS in JSのお世話になることがよくあります。 この記事では、次の時代のCSS in JSはWeb Componentsベースのものになるのではないかという話をします。 Web Componentsの復習 Web ComponentsはいくつかのWeb標準の総称であり、特に重要なのはCustom ElementsやShadow DOMです。いずれも、V1と呼ばれる仕様は全てのモダンブラウザでサポートされています（Safariが一歩遅れていて少し心配ですが）。 https://caniuse.com/custom-elementsv1 https://c
Web Design System: Migrating Web Components To React | Mercari Engineering
This post is for Day 8 of Mercari Advent Calendar 2022, brought to you by Williams Kwan from Mercari Core team and Faisal Rahman from the Mercari Architect team. Intro Mercari internal design systems power the UI in Mercari web apps. It allows Frontend engineers to implement UI changes quickly by providing UI building blocks. The design system is currently built using Web Components but we are in
GitHub - peterpeterparker/stylo: Another kind of rich text editor
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
Skip the boilerplate Building on top of the Web Components standards, Lit adds just what you need to be happy and productive: reactivity, declarative templates and a handful of thoughtful features to reduce boilerplate and make your job easier. Every Lit feature is carefully designed with web platform evolution in mind. Tiny footprint, instant updates Weighing in at around 5 KB (minified and compr
Catalyst
<hello-world> <input data-target="hello-world.name" type="text"> <button data-action="click:hello-world#greet"> Greet </button> <span data-target="hello-world.output"> </span> </hello-world> import { controller, target } from "@github/catalyst" @controller class HelloWorldElement extends HTMLElement { @target name: HTMLElement @target output: HTMLElement greet() { this.output.textContent = `Hello,
GitHub - github/jtml: Write HTML in JavaScript, using template-tags.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
概要 2021/04/22に新しいWeb Componentsライブラリ、Lit(Lit 2.0)がリリースされ、同日ローンチイベントもYouTubeで生配信されました。 それに伴いPolymer ProjectがLitに改名されロゴが刷新されました。 ウェブサイトも新しく公開されました。チュートリアルとPlaygroundが刷新され、非常に便利になりました。 実装は https://github.com/lit/lit に公開されています。 LitElementとlit-htmlのおさらい 旧Polymer Project（Lit 1.0）では、lit-html(HTMLテンプレートライブラリ)とLitElement(Web Componentsを実装するためのライブラリ)の2つのライブラリが提供されていました。 LitElementにもテンプレート機能があったので、2つとも独立したライ
GitHub - github/github-elements: GitHub's Web Component collection.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
やさしく学べるWeb Components 「やさしく学べるWeb Components」発行主旨・内容紹介 「やさしく学べるWeb Components」目次 「やさしく学べるWeb Components」Amazonでの購入はこちら 「やさしく学べるWeb Components」楽天市場での購入はこちら※電子書籍版です。 やさしく学べるWeb Components インプレスグループで電子出版事業を手がけるインプレスR&Dは、「技術書典」や「技術書同人誌博覧会」をはじめとした各種即売会や、勉強会・LT会などで頒布された技術同人誌を底本とした商業書籍を刊行し、技術同人誌の普及と発展に貢献することを目指す「技術の泉シリーズ」最新刊として、大木尊紀氏、水野廉也氏、アサオカアツコ氏、aggre氏著書による、Web Componentsとは何か、どうやって使うのかを解説した「やさしく学べるWeb
web components | FAST
FLEXIBLE, PERFORMANT, & INTUITIVEFAST is dedicated to providing support for native Web Components and modern Web Standards, designed to help you efficiently tackle some of the most common challenges in website and application design and development. For an in-depth explanation of FAST, see our docs introduction.
GitHub - frameable/el: Minimal JavaScript application framework / WebComponents base class
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
GitHub - Polight/lego: 🚀 Low-Tech Web-Components Made Lightweight & Future-Proof.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
webcomponents/proposals/DOM-Parts.md at gh-pages · WICG/webcomponents
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
2019年はWebComponents元年(2回目)！WebComponentsをReact/Angular/Vueと一緒に使う - Qiita
2019年はWebComponents元年(2回目)！WebComponentsをReact/Angular/Vueと一緒に使うAngularVue.jsWebComponentsReactserver-side-rendering WebComponentsは未来の技術みたいな感じでしたが、lit-elementが登場してかなり作りやすくなりました。ただ、実際のウェブアプリケーションで使うにはどんな感じになるのかな、というのを脳内シミュレーション＆実験してみましたので、それの記録です。 この記事自体は5月ごろに書いて放置したのですが、JSConfで発表したのでそれに合わせて公開します。 本記事の想定ストーリー かっこいい部品を作りたいデザイナーさん、もしくは社内的なデザインガイドラインがある。ホストのフレームワークがなんであるかは気にしないで、とりあえずデザインを作り込みたい 管理画面は
Declarative Shadow DOM Stay organized with collections Save and categorize content based on your preferences. Declarative Shadow DOM is a standard web platform feature, which has been supported in Chrome from version 90. Note that the specification for this feature changed in 2023 (including a rename of shadowroot to shadowrootmode), and the most up to date standardized versions of all parts of th
# Implementing single-file Web Components Probably everyone who knows the Vue.js framework also heard about its single-file components. This super simple idea allows web developers to define the entire code of a component in one file. It is such a useful solution that an initiative to include this mechanism in browsers has already appeared. However, it seems quite dead as, unfortunately, no progre
React みたいなコンポーネント作る系フレームワークだと思って Custom Elements を使おうとすると、たちまち死んでしまう。まだ色々試している最中なのでアウトプットはないんだけど、とりあえず今考えてることを書いておく。役立たないし刺されたら困るからポエム宣言しとこうか。ポエムです。 Custom Elements やっていきたい Custom Elements の良さは特定のフレームワークに依存しないところだと思う。例えば React とか Vue とかだとそれぞれのフレームワークの世界にどっぷり浸かってしまい互換性がないが、 Custom Elements ならば普通の要素の延長線上でどこに持って行っても使える。 npm とか使わなくても script タグで CDN とかから持ってくればすぐに動く。夢のよう。もちろん、データフローはアプリケーション固有のものになるだろうか
Introducing: Modern Web
We are excited to finally introduce our brand new project: Modern Web. What is Modern Web? A few years ago we started the Open Web Components project. Our goal was to help people develop web components, and we created guides and tools to help people do this. While working on this project, we realized that a lot of the things we were making were not necessarily specific to web components. To mainta
Enhance
Get productive Enhance ships with everything you need to build a production ready app. File-based routing Organize your pages as easily as a desktop folder. Database-backed APIs Access and store data with simple JavaScript functions. SSR composable HTML Custom Elements Build reusable components with HTML and scoped CSS. Web Component progressive enhancement Add client-side interaction just where y
Use AMP Components everywhere – Announcing Bento Developer Preview
{{^prevUrl}} {{#result.components.length}} {{#initial}}Important Components{{/initial}}{{^initial}}Components{{/initial}} {{/result.components.length}} {{/prevUrl}} {{#result.components}}
Printing music with CSS grid
Printing music with CSS Grid Too often have I witnessed the improvising musician sweaty-handedly attempting to pinch-zoom an A4 pdf on a tiny mobile screen at the climax of a gig. We need fluid and responsive music rendering for the web! Stephen Band 24 Apr 2024 Music notation should be as accessible and as fluid as text is, on the web; that it is not, yet, is something of an afront to my sensibil
Zenn が Web Components を使って tweet を表示するようにしていたので、見習ってこのサイトにも取り入れてみた。 Web Components を利用した Zenn マークダウン部分の改善について 🔗 zenn.dev ZennEditor 内のコード 🔗 github.com 比較 何が良いのか？ 埋め込みコードの良くないところ <blockquote class="twitter-tweet"><p lang="ja" dir="ltr">ほぼだいたい完全に理解した</p>— miyaoka / STUDIO (@miyaoka) <a href="https://twitter.com/miyaoka/status/1346720500387438593?ref_src=twsrc%5Etfw">January 6, 2021</a></bloc
GitHub - modernweb-dev/web: Guides, tools and libraries for modern web development.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
よくある2ペインのレイアウト用コンポーネントを作りつつ、Web Componentsの仕組みを理解する｜masuidrive
よくある2ペインのレイアウト用コンポーネントを作りつつ、Web Componentsの仕組みを理解する Web Componentsを一言で説明すると「HTML/CSSが独立したカスタムタグを作れる仕組み」です。理解するには、まずは素のJavascriptだけでよくある部品を作ってみることが一番だと思います。 多くのサンプルではボタンやアイコンなどの部品を作りますが、今回はflexboxを使ったレイアウト定義のコンポーネントを作ってみます。この部分にはちょっとしたハマりどころがあるのでちょうど良い練習になります。 もう一つハマりやすいのはフォーム部品ですが、これはまた後日書きます。 この記事の前に 「今なら使えるWebComponents」を軽くでも読んでおいてもらえると嬉しいです。 2ペインのレイアウトを考える最初にWebアプリでよくある、左にナビゲーション、右にコンテンツを置く2ペイン
JSer.info #665 - Web ComponentsライブラリであるLit 3.0がリリースされました。 Lit Launch Day: Lit 3.0, Labs graduations, a compiler and more! – Lit Lit 3 upgrade guide – Lit Lit 3では、IE11のサポート終了、最小の実行環境をES2021をサポートしてるブラウザへ変更が行われています。 Lit 2.0で非推奨となったAPIの削除、Stage 3のDecoratorの対応なども行われています。 また、新しいLitテンプレートコンパイラーの公開、Preact Signalsを統合するパッケージも公開されています。 Chrome 118がリリースされました。 New in Chrome 118 - Chrome for Developers Chrome 11
The Design System Ecosystem
What does a mature, end-to-end design system look like in a big, complex organization? What are all the moving pieces, and how do they hang together as a well-considered architecture? What’s required and what’s optional? Hold onto your butts, because we’re going to go deep on this one. Let’s start here: a design system’s relationship to digital products can be boiled down like so: There’s a design
2020.10.07 template 要素の shadowroot 属性による宣言的な Shadow DOM Shadow DOM は、代替要素を除いた任意の HTML 要素を DOM API で参照して attachShadow({ ... }) メソッドを呼び出すことで命令的に生成できる。これを新たに <template> 要素の shadowroot 属性によって、対象の HTML 要素の Shadow DOM を宣言的に生やせるようになる仕様が提案されている。既に Chrome 85 で試験的に実装されており、フラグ付きで利用できるようになっている。この記事は自分用にまとめたメモ。 Add declarative Shadow DOM features by mfreed7 · Pull Request #892 · whatwg/dom Add declarative Shad
GitHub - paulirish/lite-youtube-embed: A faster youtube embed.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
lamplightdev - Streaming HTML out of order without JavaScript
This is a simple page that renders a list of 10 items. Try it with and without JavaScript enabled in your browser. There's a few things to notice: The 'app shell' renders first - you see the header and the footer, but there's a loading placeholder where the list of items will be rendered. After a second the loading placeholder is replaced with the list of items - but with each item itself having a
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
HTML 全体の CSS を取得して Shadow DOM に適用する
How we use Web Components at GitHub
Svelte + TypeScript のベストプラクティスを考える
HTML だけで Shadow DOM を構築するための宣言型 Shadow DOM
BASEのノーコードはどのように実現されているのか？ - BASEプロダクトチームブログ
進化し続けるフロントエンド技術「Web Components」はライブラリ不要！――気軽に始めて開発の生産性を高めよう
次の時代のCSS in JSはWeb Componentsを従える
Lit
Introducing "Lit" for Web Components
「Web Components」を優しく解説した一冊 - mojiru【もじをもじる】
Declarative Shadow DOM | web.dev
Implementing single-file Web Components | CKEditor
Custom Elements を正しく実装するのはとても難しい - ジンジャー研究室
埋め込みTweetをWeb Componentsで描画するようにした
2023-10-16のJS: Lit 3、Chrome 118、Zodの作り方
template 要素の shadowroot 属性による宣言的な Shadow DOM
www.rieti.go.jp
sarumaruyuu.hatenablog.com
tmitter.news
selectra.jp
mixi.jp
blog.livedoor.jp/yakiusoku