You can make up HTML tags, https://maurycyz.com/misc/make-up-tags/.

So, yes, it’s a bit unknown but it’s totally correct to have HTML elements like `<foo-bar>`. The hyphens declares an _unknown custom element_ (which becomes known once defined with JavaScript), and is perfectly valid. You can style it, like any other element.

Too bad the examples in the article are not great: semantically correct elements exist such as `article`, `blockquote` etc.

#html #CustomElement

You can make up HTML tags: (Maurycy's blog)

@epa-wg/custom-element have closed the last significant bug and looks to me as good candidate for its first release.

It allows to make web app exclusively with HTML tags.

Next is Material UI components lib with Consumer Semantic Theming.

#DeclarativeCustomElement
#CustomElement

https://www.npmjs.com/package/@epa-wg/custom-element

#Dev #Web

Pour intégrer un élément web personnalisé (#CustomElement) dans un #Form, n'oubliez pas d'implémenter les apis qui vont bien, ca facilite 'achement la vie :

static get formAssociated() {}
formResetCallback() {}
get form() {}
get name() {}
get type() {}
get validity() {}
get validationMessage() {}
get willValidate() {}
checkValidity() {}
reportValidity() {}

Entre autres

https://web.dev/articles/more-capable-form-controls

#javascript

More capable form controls  |  Articles  |  web.dev

New web platform features make it easier to build custom elements that work like built-in form controls.

web.dev

consumer semantic theme taking the shape.
The state variations are based on emotional tokens

Native & light created;
Dark and high contract colors are in progress.

It would be a part of Material Design based <custom-element> no-JS, pure HTML UI library.

#CustomElement #css #WebDev

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

@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 #customElement definition as I am #developingDesignSystems so that "it just works™️", though without CSS Anchor Positioning and CSS Top Layer promotion it leaves you wanting.

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

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

Currently messing with #WebComponent 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.

#FrontEnd #CustomElement

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

https://gist.github.com/davetron5000/255ff81851c18a220fa73b329cd8ed4d

a.html

GitHub Gist: instantly share code, notes, and snippets.

Gist