https://github.com/alicewriteswrongs/custom-element-internals

ElementInternals and friends
https://github.com/alicewriteswrongs/custom-element-internals

Last synced: about 1 month ago
JSON representation

ElementInternals and friends

• Host: GitHub
• URL: https://github.com/alicewriteswrongs/custom-element-internals
• Owner: alicewriteswrongs
• Created: 2023-07-11T18:31:43.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2024-06-15T17:43:33.000Z (7 months ago)
• Last Synced: 2024-10-09T01:41:39.105Z (4 months ago)
• Language: JavaScript
• Homepage: https://custom-element-internals.vercel.app/
• Size: 17.6 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# ElementInternals experimentation

This repo holds a simple, no-build example of using

[ElementInternals](https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals)

to implement a simple form control which participates in the form around it,

setting validation state and things like that. It's intentionally pretty

minimal to just serve as a tool for documenting and explaining how this works,

and is heavily commented.

You can check it out online [here](https://custom-element-internals.vercel.app/) or

'run' it locally by doing:

```sh

npm i

npm start

```

This just starts a simple http serve in the directory, there's no build step

because this is just HTML and JS.

In the example the 'submit' button will log the current state of the form to

the console so you can check it out. Try inspecting the element, getting a

reference to the custom element and looking at its properties and methods, etc.