search

illright / attractions

A pretty cool UI kit for Svelte
https://illright.github.io/attractions
MIT License
1.03k stars 37 forks source link

kebab case for custom elements #355

Open atomkirk opened 2 years ago

atomkirk commented 2 years ago

What do you think about using something like https://github.com/roonie007/vite-plugin-svelte-kebab-props to convert camelcase attributes to kebab case so that all props can be set easily when using as custom elements?

If you think this might be possible, would you mind giving me some hints as to how I can contribute to this lib to make that happen?

atomkirk commented 2 years ago

I guess I could just fork the repo and rename all the props to be all lowercase then build it myself? 🤔

atomkirk commented 2 years ago

maybe a strategy like this could also be used https://github.com/oranmor/svelte-custom-element-dash-properties-example

specifically:

https://github.com/oranmor/svelte-custom-element-dash-properties-example/blob/master/src/MyCustomComponentWrapper.js

atomkirk commented 2 years ago

For context, I want to use this component lib with Phoenix Liveview. I think making this lib very consumable as custom elements greatly increases the market for it since it can be used by any front-end framework.

aabounegm commented 2 years ago

That indeed seems like a nice solution for the prop naming issue, but unfortunately there is a bigger problem at hand. Currently, Svelte does not correctly output a custom element for nested components. Unfortunately, we do a lot of component reuse in the library and it's not very feasible to migrate all the usages to custom elements, so until https://github.com/sveltejs/svelte/issues/3520 is resolved, custom elements are not supported and we intend to remove the docs page in the next release.

atomkirk commented 2 years ago

Ahhhhh. Thank you that answer!!