Svelte - Make web components!

[@hz3600]

this has changed my life profoundly.

[@ftnsco]

Helena Zarazúa C'mon now, stop being so adorable! 😀 I would love to know how it did, because for the past 15 min I've been coming up with different scenarios as to how could this cool way of wrapping logic could have changed your life, profoundly. I do like it myself to be honest... ❤️ & ✌🏼

[@MuhsinFatih]

With this, Svelte is like the swiss knife of web development. I can use my svelte components in react projects that I contribute to, and not have to deal with react!

[@babakfp]

How did you output the Svelte components as Web Components???

[@supbra1]

Can we get an updated version of the tutorial for Svelte 4?

[@grantsburke]

THIS!!! Great, concise vid! Been looking for something just like this to get me started on Svelte/Web Components. Keep up the vids bro!

[@MohammadEmranbd]

Falling love to see svelte magic

[@EladBarness]

Just saw it today since I only am getting started with svelte, I wish I could paste the mind-blown gif, thank you man

[@SvelteMastery]

Haha hope you enjoy!

[@maykbrito]

Ideas on how to make a slot content get the styles placed in component? I'm not able to style slot content, in the custom component itself :/

[@markholdt2636]

This is great. I have been struggling with including a charting library into a svelte custom web component. Any guidance appreciated...

[@isidorenwaiwu2793]

I am facing a similar problem. The component library was made using sveltekit, so there is no roll-up config to begin with...

[@federicovarela379]

Hi! I have a question if you don't mind, is it possible to compile web components to separate files? Like compiling cool-button and cool-card to different files

[@SvelteMastery]

Hey, I’m not sure but let me know if you find the answer!

[@nomeassente]

It is, for each file.svelte that you want to export as a web component create a coresponding file.js. Esample WebComponent1.svelte webcomponent1.js, WebComponent2.svelte webcomponent2.js. Then the important part, change your rollup config to compile to separte files, the simpliest way is to change the "export default " from object to array of objects, the following is an example of compiling two different files. ``` export default [ { input: 'src/webcmp1.js', output: { sourcemap: true, format: 'iife', name: 'app', file: 'public/build/webcmp1.js' }, plugins: [ svelte({ dev: !production, css: css => { css.write('public/build/webcmp1.css'); }, customElement: true }), resolve({ browser: true, dedupe: ['svelte'] }), commonjs(), production && terser() ], watch: { clearScreen: false } },{ input: 'src/webcmp2.js', output: { sourcemap: true, format: 'iife', name: 'app', file: 'public/build/webcmp2.js' }, plugins: [ svelte({ dev: !production, css: css => { css.write('public/build/webcmp2.css'); }, customElement: true }), resolve({ browser: true, dedupe: ['svelte'] }), commonjs(), production && terser() ], watch: { clearScreen: false } } ]; ``` Hope the example is clear enough, Cheers!

[@federicovarela379]

A. Ghebea Amazing!! Thanks a lot!!!

[@juanpabloruizmunoz1424]

​@@nomeassente Hello Ghebea, thanks for that! I wonder if doing that I'm duplicating svelte dependecy in both files, if that is the case, is there a way to solve it?

[@2002budokan]

Is there anything that I should care about if I would like to use cool-button inside the cool-card? I mean how can we use a previously written web component inside a new one in Svelte. This creates a dependency between components, can rollup need extra configurations to create a dependency graph to compile the bundle.js?

[@designed4freedom]

Technical question: so we are rolling a component library in this custom-element way. Here's the catch: how does one use custom-elements that are interdependent? For instance, we might have something like our-button and our-modal. our-modal actually uses (imports) our-button. However, these components are separate packages in a mono-repo top be delivered across various teams and apps. If you bring in the button bundle, and the modal bundle, you will not only get duplicate our-button code, you will also get a custom-tag definition name collision (like you did in this vid when you accidentally named both components the same thing). In the ideal world the a build tool would recognize the duplication of code, and clean things, but we cannot rely on our consumers having this rigged up. So I guess, I'm just trying to sort out an approach for delivering interdependent custom-elements without bloat or name collision. Anyone have any hot tips? Many thanks, friends!

[@m3rl1on]

wow this is SUPER cool! i dont know svelte could do that.

[@AlexReyesInHD]

I like your videos, they're always helpful

[@JULIOTORRES-km1gs]

great, however if you add a link to a css library to the page index.html (bootstrap for example) those css rules do not apply to custom components, there will be some way to solve this ...?

[@SvelteMastery]

Yeah I think that’s just how web components work but there’s probably some work around..?

[@iwswordpress]

Thanks for doing this. I suggested it and you delivered. :)

[@SvelteMastery]

haha yes, thank you for suggestion :)

[@mrMinstrel]

tag="cool-thanks"

[@SvelteMastery]

nice :D

[@ashifiqbal]

I am getting this error while creating a WEB-Component using this. Any idea why? Uncaught TypeError: Illegal constructor

[@495webdesign8]

Whats the size of that "cool components" file?..

[@winepim]

Thanks for the awesome video. I'm new to Svelte but I was wondering if there is anyway I could see changes on my Button.svelte in my dev environment without building it and attach it to index.html, thanks

[@alexanderm6187]

Thank you a lot! Nice tut :)

[@MMuhammadAsif]

I want to use my whole project into widget like some sort of embedded code. So Basically I have to use My svelte project in my other framework project (angular , vue ,etc). If anyone can help please let me know.

[@pierre2133]

hmm, how can I use custom elements api like connectedCallback, disconnectedCallback etc?

[@SvelteMastery]

Not sure, does onMount or onDestroy work for that? Or maybe use an action?

[@cristianf98]

Really cool! Is there a way to export each component separately? I mean it's own js and css, like Button.svelte -> cool-button.js & cool-button.css

[@bmehder]

I can't thank you enough for this. I knew it was possible, but it is pretty buried in the documentation.

[@paulfx5019]

Hi Svelte Master, many thanks for your tutorials...I have struggled with building a web component (Custom Elements) with Svelte that has children components (eg importing multiple Svelte files), also have struggled with building web components with Svelte using the Material-UI Svelte components....so would appreciate a tutorial that incorporates children Svelte components and child Svelte files. Cheers

[@paulfx5019]

Hi Svelte Master, I resolved the issue myself, one can import a child component by setting note the 2 dashes....also learned that global css declarations do not work for child components, $$props-class does not work for child components, does not work within child component....what did work was including external web components such as UI5, MWC and etc, just not web components built with Svelte....My love/hate relationship with Svelte is finally over and my advice after playing with Svelte, LIT-Element, StencilJS and others....just develop web components in vanilla javascript, yes its more coding and more testing but the flexibility outweighs the frustrations of yet another frameworks/compliers that's not fit for purpose. Vaadin, UI5 & MWC are all built with vanilla javascript (that pretty much tells the story in my option).

[@babakfp]

​ @paulfx5019 Back then the story was something look how Svelte can perfectly build web components for you, now we realize all of that was a bunch of lies. I tried to build web components for a PHP project with Svelte but later I found out there is a ton of limitations and also I couldn't find a way, a command to export the Svelte components as web components. Do you have a solution for that?

[@paulfx5019]

I stopped using Angular and Svelte a couple of years ago, anything is much simpler with vanilla javascript, html & css. Web Components with native HTMLElement is the only way.@@babakfp

[@nomeassente]

Niiiceeee! thank you for the cool vid!

[@AmitKumar-qv2or]

Awesome bro....

[@gorbulevsv]

Thanks!

[@Myrmod]

Hello easy Pattern Library :D

[@marlonrtt]

Really nice!

[@lonniebest4697]

Respectfully: the word "BUTTON" has two Ts in it and neither of them are silent. Thanks for the video.

[@SvelteMastery]

actually, in american english it's a glottal stop :) check this out: dialectblog.com/2013/05/19/button-vs-butter/

[@lonniebest4697]

@@SvelteMastery To me, it is more like chalkboard scraping :) check this out: en.wikipedia.org/wiki/Chalkboard_scraping I apologize for being so critical on something so superficial, but it really does bother me for some stupid reason I don't understand.

[@gradientO]

Wohooo

[@trochymiak]

nice!

[@elghandour12]

so great

[@AhmedEssam_eramax]

Wow