No config responsive menu A Responsive Menu using slots for overflow. This uses slots for "moving" and thus avoids the need to alter the DOM directly with JavaScript. Also, with...

Do you want a dynamic, responsive navigation?
What if you want zero config, no DOM manipulation, no attributes popping up?
Well, slot assignment, popovers, and anchor positioning, you can get it done. Okay, that's a lot. But, doable.

#CSS #webcomponents #customelements

codepen.io/dutchcelt/fu...

A Production-Ready Web Component Starter Template :: Aaron Gustafson Creating a new web component from scratch involves a lot of boilerplate—testing setup, build configuration, linting, CI/CD, documentation structure, and more. After building — and refining/rebuilding...

#Development #Templates
Web component starter template · The essentials to ship production-ready components ilo.im/169jml by Aaron Gustafson

_____
#WebComponents #CustomElements #Accessibility #ProgressiveEnhancement #Encapsulation #ShadowDOM #Testing #Npm #WebDev #Frontend

How To Dynamically Install Custom Elements A reusable pattern for custom elements installation

#Development #Guides
Installing custom elements dynamically · A reusable pattern for on-the-fly custom element loading ilo.im/169hh8 by Heydon Pickering

_____
#Loading #CustomElements #WebComponents #WebDev #Frontend #DOM #HTML #JavaScript

Many UI libraries "support" #customElements, but has work been done to go the other way?

Use case: Have a future-proof, web-standards-based UI with a series of shiny #webcomponents; but (for reasons) I need to slam in a #React thing. No build step. Slow is fine. Wrap a blob in <react-thing>? 😶‍🌫️

Setting up a documentation setup for utilizing #customElements manifest and @11ty.dev. Deeply satisfying. Though I wonder how to incorporate CSS only parts of the design system. With modern CSS and HTML many old JavaScript solutions simply became obsolete.

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)

So. How would I add documentation for custom invoker commands in custom elements manifest and jsDoc?

#customElements #webcomponents

I just made a open source boilerplate class for webcomponents.

What do you think?

#javascript #webcomponents #customelements

baseelement.emanuelsaramago.com

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

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.

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

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

A screen shot of a code editor with the following code displayed ``` @define export default class extends HTMLElement { // <- it's a custom element and a vanilla js class static match = '/show-counter' // <- show at site.com/show-counter (act as a route) static tagName = 'my-counter' // <- give the custom element a tagName @state accessor count = 0 // <- the @state decorator means we want to render when count changes get double() { // <- double is computed. This is a vanilla js getter return this.count * 2 } render() { // <- The template. the `this` keyword here always refers to the instance return ( <> <div>Count: {this.count}</div> <div>Double: {this.double}</div> <div> <button onclick={() => this.count++}>+</button> <button onclick={() => this.count--}>-</button> </div> </> ) } } css` /* <- define styles in the same file with syntax highlight and autocomplete */ body { /* <- styles can be unscoped */ margin: 0; display: grid; place-items: center; } my-counter { /* <- or you can use the tagName to scope styles */ display: grid; place-items: center; height: 100%; width: 100%; button { /* <- vanilla css nesting support */ margin: 0.5em; } } ` ```

A short explainer of the current syntax for creating routes/elements. I feel like this is getting close to something "final"

shout if you have any strong feelings

#javascript #dev #frontend #buildinpublic #webdev #customelements #jsx #css

<event-count> Web Component, displaying a countdown to 2029-1-20

A year older, and wiser

Had to update the <event-count> Web Component today

Couldn't resist to add an extra default counter: event="48"

added the FlagMeister Web Component for flag effect

event-count.github.io

flagmeister.github.io

#webcomponents #webcomponent #customelement #customelements

I just love the way #webcomponents simplify creating custom widgets.

My #BbtA / #BitD progress clock widget is in public alpha shape after just a couple of short coding sessions:
cyan-design-system.netlify.app/addons/cn-st...

#litjs #customelements #webdev #rpg

GitHub - FuzzyLogicLlama/webcomponent-soc-webpack: Provides a minimal webpack starter for splitting custom elementdefinitions of web components into separate JS, HTML, and CSS files. It uses webpack's... Provides a minimal webpack starter for splitting custom elementdefinitions of web components into separate JS, HTML, and CSS files. It uses webpack&#39;s html-loader and css-loader to import HTML a...

It always bothers me when #customelements (of #webcomponents) have their #HTML and #CSS defined inline as #JS code. So, I created a starter repo to showcase a different approach with #webpack: github.com/FuzzyLogicLl...

The web moves quick. New #WebComponents logo just dropped, but instead it's #CustomElements (as it should be) 👀

Cool stuff being built with custom HTML elements. #customelements

One of my goals is to eventually connect this to Lume's custom HTML elements for 3D editing in web apps. #customelements

This makes me very happy.
#webcomponents #customelements

How to manage reactive state using Custom Elements (Web Components)

I wrote about managing complex reactive state in custom elements (web components) with event dispatch #webcomponents #customelements #signals #html nathanherald.com/posts/reacti...

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

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

<x a=... data-b=... class=c>
x.attachInternals().state.add(d)

Tolik možností. Nějaké názory, kdy, kterou a proč volit?

"a" není dopředně kompatibilní
"b" je dlouhé
"c" a "d" není key-value

#js #webdev #customelements

#webcomponent and #customelements hashtags added to Web Components Feed.

Enjoy 😊

White text on blue background: Dark mode toggle

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...