-
-
Notifications
You must be signed in to change notification settings - Fork 4.2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Feature: allow components to opt out of custom elements build #4228
Comments
I don't think we want to change components compiled with The compiler itself is only ever compiling one component at a time, so if you have complete control over how it's getting called, there's nothing that actually needs to change here. This, then, I think, is more of a request for the bundler plugins. I sort of recall that there is a built-in way in webpack to get it to use loader configs that vary per file (although I don't remember how to use it), but I don't believe there is in Rollup. I'm not sure what sorts of mechanisms the ecosystem has settled on for handling this in Rollup plugins - probably specifying callbacks that are passed the path of the current file. |
Playing a bit of devil's advocate, it does seem silly that the compiler will moan about The problem is that this compiler option is already well-established and to change it now might bend some projects way out of shape. |
Thanks for the feedback. I made this request based on looking at the compiled code, so let me see if I can clarify. First, I agree wholewheartedly about the backwards compat thing. I think @dkondrad gets where I was going with the "absense" of a tag meaning "not a custom element". However, I have no opinion on how this should be implemented, and for the sake of conversation let's say that a special value // <svelte:options tag="my-custom-tag" />
class Outer extends SvelteElement { ... } //-> extends HTMLElement
customElements.define('my-custom-tag', Outer);
// <svelte:options tag="NONE" />
class Nested extends SvelteComponent { ... } // -> does not extend HTMLElement As it currently stands, the Nested component always extends the class Foo extends HTMLElement {}
new Foo(); // Illegal construction
customElements.define('my-foo', Foo);
new Foo(); // <my-foo></my-foo> |
As I'm playing more with svelte, this same issue is causing me other problems. Because of the all-or-nothing nature of https://svelte.dev/repl/282605849ac046da81cdc880b065a3ae?version=3.16.7 The problem is that when AsyncRenderer is compiled as a webcomponent, it can only be consumed as a web components (eg.
|
Yeah, mixing and matching would need custom bundler support or automatic detection that I mentioned. |
I am not able to use Svelte Material UI Components when setting I have no preference for how this should be handled but I don't think it should be All or Nothing scenario. |
Running into the same issue. I tend to agree with @DesignByOnyx #4228 (comment). Not too familiar with the compiler yet, but might adding a customElements=true/false option to svelte:options be a workable solution instead of the global setting? |
I've fixed this by changing the build/bundling via Rollup. Svelte Components to be built as Custom Elements get the file extension *.wc.svelte and normal Svelte components retain the *.svelte extension. The *.wc.svelte components have the svelte-options with tag set. The Rollup config then sets the Svelte "customElement" custom depending on the file extension.
I've put up a demo git repo in case anyone wants to pursue the same solution: https://github.com/jawish/svelte-customelement-rollup |
@jawish I took your solution to use, with a little naming twist:
Web components are As a welcome side effect, this also solved another problem: was not able to pass props to subcomponents. Now, though using |
This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions. |
This issue has been closed as it was previously marked as stale and saw no subsequent activity. |
Is your feature request related to a problem? Please describe.
Minor problem: when using
customElement: true
, it would be nice if individual components could opt out of inheriting from HTMLElement (SvelteElement) somehow and instead inherit from SvelteComponent. This would allow component library authors to have control over "public" components vs internal components. Consider this:Outer.svelte
Nested.svelte
When using
<my-custom-element>
in another application, it results in a "Illegal constructor" error. The error happens because theNested
component inherits from HTMLElement but is never defined withcustomElement.define(...)
. When Svelte goes to instantiate the Nested component, the browser complains... rightfully so. The request I am making is this: I shouldn't have to define a custom element for my Nested component. It's sort of "private" and should not be consumable outside of the Outer component.Describe the solution you'd like
Only elements which define a "tag" should inherit from HTMLElement (SvelteElement), including
tag={null}
. If a component does not define a "tag", then let it inherit from SvelteComponent.How important is this feature to you?
This would be pretty nice to have as we are evaluating different tools and the ability to control which components get exported.
Additional context
We are building a component library and we will have dozens of "components" used throughout, but our "public" interface is really only 8 or 9 components.
The text was updated successfully, but these errors were encountered: