custom-elements-everywhere icon indicating copy to clipboard operation
custom-elements-everywhere copied to clipboard

What about producing custom elements?

Open justinbmeyer opened this issue 5 years ago • 4 comments

While listing which libraries work with custom elements is extremely useful, I'd also like to know which frameworks can produce custom elements. Would this be a useful advanced test?

Adding complexity is that some frameworks have third party libraries that do this, (example: convert react to web components), should something like this be included?

If there's support, I'd be interested in helping write the tests, etc. Thanks!

justinbmeyer avatar Aug 16 '19 00:08 justinbmeyer

Hm that's an interesting idea.

It also brings into question what sorts of behaviors do those libraries imbue into their elements. For example, do they create corresponding properties and attributes? Just because you can convert an element from React to a custom element doesn't necessarily mean it's a good custom element.

Personally I feel like I'm having a bit of a hard time keeping the existing content on the site up to date given my current workload so I think I'd be supportive of the idea but I'd also need help maintaining it 😅

robdodson avatar Aug 22 '19 01:08 robdodson

Just because you can convert an element from React to a custom element doesn't necessarily mean it's a good custom element.

Well my library does both, so it's good :-). But I completely agree with your point. Here's a rough list of criteria, in order of importance:

  1. Accepts properties.
  2. Accepts attributes for any “primitive” value properties. <my-el number="5" string="hi" bool>
  3. Updates when setAttribute is called.
  4. Produces custom events when state changes.
  5. Can be configured prior to connected.
    const el = new MyEl();
    el.prop = "value" //-> does not break
    document.body.appendChild( el );
    

What's involved with maintaining it? There's a few folks at bitovi who are big believers in web components.

justinbmeyer avatar Aug 22 '19 01:08 justinbmeyer

I have a bot that keeps most dependencies up to date. But aside from that I havent had time to write new tests or update tests for frameworks that have done major version revisions. For example, Svelte 3 doesn't work because the tests need to be updated.

So if someone wanted to add new tests I guess I'd need them to own the maintenance of those tests and handle integrating their results into the site.

robdodson avatar Aug 27 '19 01:08 robdodson

I think this would be very good to do, especially to test that frameworks that do things like event delegation have a way to work scoped to a shadow root.

I think the way to proceed here would be to develop a list of tests that we would want to write against custom elements and then open the repo for contributions of custom element implementations using the framework to test.

justinfagnani avatar Dec 15 '21 20:12 justinfagnani