Help to embed a SvelteKit web component in an Angular app with conflicting CSS.

[winterec]

Hi friends,

We have an existing version of our production web application running in Angular with Bootstrap SASS for styles.

The new app has been developed using SvelteKit, and Tailwind PostCSS for styles. It's not feature complete, so I have isolated one component to backport into the existing Angular app while we finalise development of the new SvelteKit app.

I'm using ESBuild to bundle the web component from a specific endpoint. Here is the config:

import esbuild from 'esbuild';
import sveltePlugin from 'esbuild-svelte';
import sveltePreprocess from 'svelte-preprocess';

esbuild
	.build({
		entryPoints: ['./src/component-export/email.svelte'],
		outfile: 'dist/svelte-email.js',
		bundle: true,
		minify: true,
		conditions: ['svelte'],
		plugins: [
			sveltePlugin({
				preprocess: sveltePreprocess({ sourceMap: false, postcss: true }),

				compilerOptions: {
					customElement: true,
					discloseVersion: false
				}
			})
		],
		logLevel: 'info'
	})
	.catch(() => process.exit(1));

The only way I have been able to get the tailwind styles to be properly compiled through the entry point and all the sub modules is to set it as a global style tag in email.svelte (the entry point):

<style global lang="postcss">
	@tailwind base;
	@tailwind components;
	@tailwind utilities;
</style>

Svelte has an option to isolate the custom element in a Shadow DOM: https://svelte.dev/docs/custom-elements-api

Likewise Angular has the option to isolate a component into Shadow DOM:

@Component({
  selector: 'email-create-page',
  templateUrl: './email-create.component.html',
  standalone: true,
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  encapsulation: ViewEncapsulation.ShadowDom,
})

Now, the Svelte module has been exported as a web component, it's available in Angular, and the styles and functionality are working perfectly when using the Shadow DOM encapsulation at either level.

The issue is we're also using Stripe Elements to collect a customers card details from within the SvelteKit component, and that cannot be used within a Shadow DOM. When I switch off the encapsulation the Bootstrap styles conflict with the Svelte web component, and the Svelte component's Tailwind styles also conflict with the Angular app.

Is there any way we can fix this so that the styles will not conflict, without going through a laborious process of finding all the conflicts and dealing with them on a case by case bases (such as by renaming classes or adding !important directives)?

[winterec]

This was the solution: https://stackoverflow.com/questions/13966259/how-to-namespace-twitter-bootstrap-so-styles-dont-conflict