#CustomElements
LightNews LightNews
pablolarah.bsky.social
Dark mode toggle
by
@googlechrome
labs A custom element that allows you to easily put a Dark Mode toggle or switch on your site. #darktheme #webcomponents #customelements #darkmode #mediaqueries #themeswitcher #preferscolorscheme #webdev

github.com/GoogleChrome...
White text on blue background: Dark mode toggle
April 3, 2024 at 10:08 PM
g12n.de
So. How would I add documentation for custom invoker commands in custom elements manifest and jsDoc?

#customElements #webcomponents
Code Screenshot: import { snapdom } from '@zumer/snapdom'; /** * * @tag snap-dom * @tagname snap-dom */ * @summary Wrapper around zumerlab/snapdom adding custom export default class SnapElement extends HTMLElement{ constructor (K{ super () } connectedCallback() { this.addEventListener ("command" , (event) =>{ if (event.command === "--save-image") { let filename = event.source.dataset.filename; snapdom. download(this, { format: 'jpeg', filename }) } }) } customElements.define("snap-dom", SnapElement)
October 2, 2025 at 3:29 PM
wtnabe.bsky.social
2年ぶりにCustomElements掘ってたけど、やっぱこれくらいのシンプルさがいいんだよなぁ。
September 18, 2023 at 2:14 AM
wtnabe.bsky.social
Angular.jsと同時にCustomElementsを知って幾星霜、CSS側も::part()や--*など標準でできることが増え、影響範囲のコントロールや定義の再利用性が向上していて、以前に比べて標準技術だけで真面目にやればちゃんと品質は良くなりそう。

そろそろ本当にWebComponentsでできることはその範囲でやった方がいいんじゃない？と言えるようになったのかも。
September 19, 2023 at 5:38 PM
schizanon.bsky.social
Bundling ShadowDOM with CustomElements was the biggest mistake that's been made on the Web since XHTML
December 31, 2024 at 4:38 AM
bradleymeck.bsky.social
3. the @property is used in the iframe & style is valid but unlike the JS customElements upgrade it is lost when moved

My expectation is that both custom element & @property match when moved about. It's the inner element according to HTML but according to CSS it is the outer @property
December 3, 2024 at 1:10 AM
wtnabe.bsky.social
LitベースのUIコレクションの活用からCustomElementsに入って、デザインと要素の再利用性に気づいてもらったうえで、機能側の実装にはもう一枚何かを挟むことで「デザインの一貫性、品質を考えていく人」と「機能に責任を負う人」で上手に分担できるとよさそう。この場合「デザイン」を考える人はUIとか機能的な部分まで踏み込むには「開発力」が足りないけど「表現としてのデザイン」の責任をまっとうしようとする人とする。いやマジ両立してる人はレアすぎん？
September 10, 2023 at 2:25 AM
void-0.bsky.social
拡張機能からDOMを操作するときReact等のDOM管理ライブラリが使われてるページだと直接書き換えると内部状態と不整合が起きるしクラスやIDがわかりやすく設定されてなくて面倒だったけどWebComponentsのページになると更に面倒かもしれない
ShadowDOMが絡むとクエリセレクタで一括取得できないし
ShadowDOMを使わずCustomElementsを使ってるところはIDが重複してるし
外部からのページ操作がもっとやりやすくならないかな
August 3, 2024 at 10:59 AM
catapart.bsky.social
Another editor update: implemented dynamic component fields based on the property types, and set up two-way binding so that the transform controls and the inspector fields don't interfere with one another.
Getting closer!

#webdev #gamedev #indiegamedev #js #threejs #customelements #webcomponents
March 4, 2025 at 12:53 AM
wtnabe.bsky.social
今はLitで試してるんだけど、この程度なら「マークアップが得意な人」でも作れないかなぁという淡い期待がある。VS CodeのLit拡張入れてhtml``がハイライトできるだけでもそこそこイケる。CSSは最悪Light DOMでグローバルに書いてもよい。（CustomElementsのおかげで自然と名前空間ができるので、妙に長いclass名を考える必要がない）
September 10, 2023 at 2:08 AM
joe.trusktr.io
One of my goals is to eventually connect this to Lume's custom HTML elements for 3D editing in web apps. #customelements
November 30, 2024 at 8:31 AM
jschof.dev
I've never thought about this. Are those methods an assumed interface when you register with 'customElements'? It's interesting that you don't have to implement them all but they don't exist on the base class
February 6, 2025 at 3:53 AM
john.kreitlow.rocks
I made a rollup plugin to condense tagged template literals containing HTML and CSS! It's primarily for handling FAST tagged templates, but it should also work with Lit.

github.com/radium-v/rol...

#webcomponents #customelements #ux #webdev #rollup #FAST #Lit #frontend
GitHub - radium-v/rollup-plugin-fast-tagged-templates: Minify and transform FAST HTML and CSS tagged templates
Minify and transform FAST HTML and CSS tagged templates - radium-v/rollup-plugin-fast-tagged-templates
github.com
November 9, 2024 at 12:03 AM
joe.trusktr.io
Cool stuff being built with custom HTML elements. #customelements
chrisshank.com 𝕮 @chrisshank.com · Nov 25
"make illegal states unconnectable" - @disconcision.com
November 30, 2024 at 11:16 PM
dutchcelt.com
This makes me very happy.
#webcomponents #customelements
November 20, 2024 at 6:25 PM
wtnabe.bsky.social
あーいやーCustomElementsの入れ子に対して制御するのはやっぱ難しいなぁ。
September 19, 2023 at 12:12 AM
webdirections.org
Custom elements in HTML are like 'squirrels in a trench coat,' allowing developers to create unique elements. Their distinct names with dashes set the…ffering creative flexibility. #CustomElements #WebDev watch @scottjehl.com from @webdirections.org Dev Summit '24. Watch More: bit.ly/4iM2Rch
April 11, 2025 at 4:55 AM
iplayitofflegit.bsky.social
#webcomponent and #customelements hashtags added to Web Components Feed.

Enjoy 😊
April 28, 2024 at 10:58 PM
bradleymeck.bsky.social
So the expectation is that there is some level of uniformity. There are a variety of workarounds going on which are not uncommon boilerplate to avoid scoping collisions. The basics of the mismatch is the following

1. It is using iframe customElements to do something akin to scoped registry

🧵
December 3, 2024 at 1:10 AM
wtnabe.bsky.social
あーこれむずいんだな。そもそもCustomElementsの子要素に対してflexboxとかがもう面倒くさい。
September 18, 2023 at 11:24 PM
joe.trusktr.io
"Custom Elements" can easily include `customElements` with all other tools revolving around it with their own icons.
December 12, 2024 at 1:45 AM
sweeting.me
Browser-native Custom Elements are awesome, why am I only learning about this now?! https://developers.google.com/web/fundamentals/web-components/customelements
Custom Elements v1 - Reusable Web Components  |  Articles...
Custom elements allow web developers to define new HTML t...
developers.google.com
November 19, 2024 at 12:27 PM
lume.io
Hello! 👋
We present you HTML elements for crafting beautiful 3D web graphics 🪄✨, compatible with Vue, Svelte, Solid.js, Angular, Ember.js, React, Lit, Astro, and all web frameworks. 🛠️

#Lume #LumeHTML #CustomElements #Threejs #WebGL #3D #WebDesign #WebDevelopment #HTML
Lume. Web Graphics Made Easy
Create beautiful graphics on any website with simple HTML compatible with React, Vue, Svelte, Solid.js, Angular, and all web frameworks.
lume.io
March 14, 2025 at 1:48 AM
wtnabe.bsky.social
Tailwindを触って思ったことが「コンポーネントをHTMLごと切り出して形作ろうにも、サーバがなくて生DOMだとそもそもHTML断片を切り出す方法がない」というのがあって、これがLPとかバーっとHTMLを書いていく行為と相性悪いと思ってたんだけど（だからTailwindを簡単なHTMLから導入しようとすると逆に面倒みが増す）、CustomElements使うとそこも（LightDOM限定だけど）なんとかなるか？
September 10, 2023 at 2:18 AM
emanuelsaramago.com
I just made a open source boilerplate class for webcomponents.

What do you think?

#javascript #webcomponents #customelements

baseelement.emanuelsaramago.com
Base Element
baseelement.emanuelsaramago.com
July 29, 2025 at 4:10 PM