Under the hood of MDN's new frontend
Last year, we launched a new frontend for MDN. The most noticeable changes were adjustments to our styles; we simplified and unified the MDN design across all of our pages. In truth, the biggest changes were not reader-visible, but rather in the overhauled code that powers our frontend. This post describes what we've done, the technologies we chose, and why we did it at all. MDN's architecture To
i-html, an inline-html import element
i-html is a drop in tag that allows for dynamically importing html, inline. It's a bit like an <iframe>, except the html gets adopted into the page. You might have used something similar before, it might seem familiar to other techniques such as hotwired turbo or similar. You might have even used an element very close to this one, for example the popular include-fragment-element by GitHub. This el
Web Components are not Framework Components — and That’s Okay • Lea Verou
Disclaimer: This post expresses my opinions, which do not necessarily reflect consensus by the whole Web Components community. A blog post by Ryan Carniato titled “Web Components Are Not the Future” has recently stirred a lot of controversy. A few other JS framework authors pitched in, expressing frustration and disillusionment around Web Components. Some Web Components folks wrote rebuttals, whil
lamplightdev - Streaming HTML out of order without JavaScript
Updated Sep 29 2024 to add further information about support in Safari, and updated information about support in Firefox. Let's start with a demo: https://ooo.lamplightdev.workers.dev: 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, b
Shoelace: A forward-thinking library of web components.
New to Web Components? TL;DR – we finally have a way to create our own HTML elements and use them in any framework we want! Thanks to the popularity of frameworks such as Angular, Vue, and React, component-driven development has become a part of our every day lives. Components help us encapsulate styles and behaviors into reusable building blocks. They make a lot of sense in terms of design, devel
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
ElementInternals and Form-Associated Custom Elements
In Safari Technology Preview 162 we enabled the support for ElementInternals and the form-associated custom elements by default. Custom elements is a feature which lets web developers create reusable components by defining their own HTML elements without relying on a JavaScript framework. ElementInternals is a new addition to custom elements API, which allows developers to manage a custom element’
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
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
LavaDome is vulnerable to onmouseover · Issue #37 · LavaMoat/LavaDome
GitHub - LavaMoat/LavaDome: Secure DOM trees isolation and encapsulation leveraging ShadowDOM
Shadow DOMとCSSの現状
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
