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
Shoelace: A forward-thinking library of web components.
Search Works with all frameworks 🧩 Works with CDNs 🚛 Fully customizable with CSS 🎨 Includes a dark theme 🌛 Built with accessibility in mind ♿️ First-class React support ⚛️ Built-in localization 💬 Open source 😸 More awesome than ever Quick Start Add the following code to your page. <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.15.0/cdn/themes/light.css"
2023-10-16のJS: Lit 3、Chrome 118、Zodの作り方
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
HTML 全体の CSS を取得して Shadow DOM に適用する
以下のコードで 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
7 Web Component Tricks
This week I finished my Frontend Masters Web Components Course. To market it celebrate that accomplishment, I wanted to share ~7 tips and tricks I’ve learned preparing my course or I feel aren’t super obvious about Web Components. 1. You can manipulate props right on a Lit element This may be something only I would do, but if you make an element with Lit that exposes its properties, you can edit t
🌐 WebPDF.pro ˂📄˃ ⸬ ˂pdf-file˃ ˂pdf-page˃ web components
monthly yearly 📄 Read-only Add WebPDF.pro interactive pages to your websites. FREE 📧 📚 forum support 📄 read-only pages 💎 vector renderer 🔠 text & link layer 🌐 World-wide Deploy WebPDF.pro on websites/apps with live support! 💳 🧑🏻🚀 live/call support 📝 form fill & save 💎 vector renderer ✨ hi-fi renderer 1️⃣ Site/App Use WebPDF.pro on 1 website/app with email support! 💳 📧 email support
Spectrum Web Components - Spectrum Web Components
Spectrum Web Components Spectrum Web Components The Spectrum Web Components project is an implementation of Spectrum, Adobe’s design system. It's designed to work with any web framework — or even without one. Accessible by default # Developed with existing and emerging browser specifications in mind, our components deliver a high quality experience whether using a screen reader, keyboard navigatio
Announcing Lit 2 stable release
Today we're announcing the stable release of Lit 2. Lit 2 is a major update: it's smaller, faster and better than before, it lays the foundation for server-side rendering, and it's all wrapped up in the new lit package on npm. Lit has come a long way since April when we announced the first release candidate for Lit 2. Since then, many partners have tested the release candidates on big applications
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Firefox onmouseover bypass · Issue #37 · LavaMoat/LavaDome
GitHub - LavaMoat/LavaDome: Secure DOM trees isolation and encapsulation leveraging ShadowDOM
Shadow DOMとCSSの現状
ElementInternals and Form-Associated Custom Elements
GitHub - Dunks1980/bay.js: An easy to use, lightweight library for web-components.
Intent to Prototype: *Streaming* declarative shadow DOM
Add declarative Shadow DOM features by mfreed7 · Pull Request #5465 · whatwg/html
GitHub - frameable/el: Minimal JavaScript application framework / WebComponents base class
Minze
GitHub - peterpeterparker/stylo: Another kind of rich text editor
GitHub - Polight/lego: 🚀 Low-Tech Web-Components Made Lightweight & Future-Proof.
