#customElement

Rui Nibau (rnb)rnb@framapiaf.org
2024-11-26

Petit composant web que je développe depuis un moment et que j'ai enfin pris le temps de terminer (enfin presque).

Il permet de représenter graphiquement des relations entre items et de les enregistrer en json.

L'enregistreur de bureau #Gnome n'a malheureusement pas saisi le curseur de la souris.

Ca sera évidemment publié sous licence libre dés que se sera prêt.

#webdev #javascript #html #css #customElement #WebComponent

westbrookwestbrook
2024-11-04

@noleli @mayank Very cool to see some minds aligning...

Sharing an element means less DOM and opens the door for larger animations between focused elements! However, as a shadow DOM users, this would break down across boundaries, and I wonder a little bit about the spooky action at a distance...

I've been putting it into a definition as I am so that "it just works™️", though without CSS Anchor Positioning and CSS Top Layer promotion it leaves you wanting.

westbrookwestbrook
2024-11-01

@knowler this positioning is quite important, yes! The idea that is “before” DOM and not “after”, as might be found in a framework, has a discretely different power structure.

2024-09-17

Looking for some custom element help. `formAssociated` allows a web component to interact with its parent `form`, making it easier to do custom inputs etc. But does that hold true for custom buttons? Can I do:
<my-button>
<button type=submit>Submit me</button>
</my-button>

And have that submit the form? My trial so far isn’t working, maybe the event is being swallowed? I have no Shadow DOM set up, have kept things simple so far.

#WebDev #CustomElement #WebComponent

2024-08-05

Currently messing with and I'm not sure if there's an out-of-the-box solution for rendering a custom element automatically on page load.

I.e., in my HTML I have `<my-element></my-element>` and I want it to render the default template when the custom element is defined.

Dave Copeland :ruby:davetron5000@ruby.social
2024-07-20

#TIL, (and I cannot find documented), but can easily replicate is that when a #WebComponent #CustomElement's `connectedCallback()` is called, `innerHTML` is undefined, UNLESS, you wait to define your custom element after DOMContentLoaded.

I wish there was a callback for a custom element that amounted to “the element has been loaded", but I can see that this doesn't necessarily make sense.

[Can't recreate in codepen since it runs all stuff after DOM loaded.]

gist.github.com/davetron5000/2

Screenshot of HTML shown in the gist’s a.html fileScreenshot of HTML shown in the gist’s b-wrong.js fileScreenshot of HTML shown in the gist’s c-right.js file
🧿🪬🍄🌈🎮💻🚲🥓🎃💀🏴🛻🇺🇸schizanon
2024-07-18

Using to render placeholder content that gets replaced later as the in with no !

lamplightdev.com/blog/2024/01/

This is an interesting technique, but it has limitations in that you can't close the until you've loaded the content.

I've released <file-tree>, a custom HTML element for representing file trees, with a permission based event system so you can (hopefully trivially) hook it into your actual file operation API (whether that's in-browser, a server, the cloud, whatever).

Have a look over on npmjs.com/package/custom-file- and let me know your thoughts!

#HTML #JavaScript #WebDev #CustomElement #Programming

2024-07-07

I've released `<file-tree>`, a custom HTML element for representing file trees, with a permission based event system so you can (hopefully trivially) hook it into your actual file operation API (whether that's in-browser, a server, the cloud, whatever).

Have a look over on npmjs.com/package/custom-file- and let me know your thoughts!

2024-07-02

Good to know that the platform is not broken, it was just me being a smartass. Turns out, form-associated custom elements behave the same as `<input>`. So what I learned from this is, when creating a form-associated custom element, use `formDisabledCallback()` to set `ElementInternals.ariaDisabled` and `tabIndex`, but do not change the `disabled` property or attribute.

#WebComponents #CustomElement

2024-07-02

OK I was wrong again:

- Changing `disabled` property on `<input>` directly always reflects to its `disabled` attribute
- Changing `disabled` property or attribute on `<fieldset>` does NOT change the `<input>`’s `disabled` attribute OR property, but it DOES enable the disabled state on the `<input>`, hence the `:disabled` selector in CSS will be selected.

Seems the most reliable way to check disabled state in JS is `Element.matches(‘:disabled’)`.

#WebComponents #CustomElement

2024-07-02

However, a form-associated custom element’s `disabled` state is only controlled by the `disabled` attribute, not by the `disabled` property, so if you don’t reflect to the attribute, the element won’t turn on the `:disabled` CSS state/pseudo class. 🤔 #WebComponents #CustomElement

2024-07-02

When building a form-associated custom element, it’s probably a good idea NOT to reflect `disabled` property to the `disabled` attribute, because doing so could prevent `formDisabledCallback()` from being invoked, and prevent a parent `<fieldset>`’s `disabled` state from affecting the custom element’s `disabled` state. Here’s a mini doc and demo pen for it: codepen.io/marchbox/pen/MWdNQK. #WebComponents #CustomElement

2024-06-22

I've released v6.1 of npmjs.com/package/graphics-ele, which adds a "safemode" attribute so that user generated content with infinite loops doesn't lock up your JS thread.

Adrian Roselliaardrian@toot.cafe
2024-06-15

Remember that time I made a perfect YouTube and Vimeo web component that is progressively enhanced and accessible and nobody said anything about it proving that it is indeed perfect?

That was cool.

adrianroselli.com/2024/06/yout

#a11y #accessibility #WebComponent #CustomElement

westbrookwestbrook
2024-05-20

@chriscoyier The problem comes when you stop writing you app in jQuery 2 or React 16, everything that belongs to those versions is essentially trash. But, when you interface is HTML and the internals of that node is encapsulated (DOM, styles, JS, etc.) how it gets there is no longer bound to the consuming application or controlling dependency, so the ability to reuse, revisit, maintain, or enhance the app using that is no longer throw way the minute after you write it.

2024-04-24

Been going down a rabbit hole today trying to get #Lit, #TypeScript, #CustomElement manifests and #Storybook to all hold hands and sing kumbaya.

Send help.

How's your day going?

🧿🪬🍄🌈🎮💻🚲🥓🎃💀🏴🛻🇺🇸schizanon
2024-04-21

@oligneisti this sounds like it would be a cool

2024-03-26

I've released v3.0.0 of npmjs.com/package/graphics-ele in fast follow-up to v2.2.0, as there was a breaking change that should have been a major version bump

# Version history

## v3.0.0

- major version update, as `currentPoint` was renamed to `currentMovable` in v2.1.0
- fixed a bug in the code responsible for tracking the `currentMovable` delta
2024-03-26

I've released v2.2.0 of npmjs.com/package/graphics-ele in fast follow-up to v2.1.0

Version history

v2.2.0

- added support for variable presets using data-* attributes, (see the "Using data-* attributes" section on the documentation page for more information.
- added documentation for handling load/error events, see the "Load and error events" section on the documentation page for more information.
- added code that ensures that the GraphicsElement class exists globally as part of loading the custom element.

v2.1.0

- added startShape, endShape, and newSegment for working with shapes. At present shapes can only be used to model polygonal edges, but these will be extended in a future version to allow for curved edges.

Client Info

Server: https://mastodon.social
Version: 2025.04
Repository: https://github.com/cyevgeniy/lmst