Latest posts tagged with #CustomElements on Bluesky
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...
#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
#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
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
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
I wrote about managing complex reactive state in custom elements (web components) with event dispatch #webcomponents #customelements #signals #html nathanherald.com/posts/reacti...
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...
