How to protect svelte component from outer css styles-CodePudding

I have page index.html which includes file styles.css ( .foo{width:100%; ..... and other styles} ) via

<link href="styles.css">

And also this page includes svelte application

Svelte application has component with same class name .foo

<div ></div>
<style>
.foo{background-color:red;}
<style>

Svelte render it into something like this

<input >

Is there any method to protect my component's input from outer css ?

For example something to make

<input >

without outer .foo class or may be another decision ?

CodePudding user response：

The best solution is to not use global styles that accidentally apply where you do not want them to. I.e. remove the rules or use very specific class names that will not accidentally be used in components. Everything else is just a workaround to a fundamental problem you will run into again.

Given that Svelte adds classes with hashes you could target the element using a different method, e.g. just the tag type (input) or some data attribute.

As far as I know the only way to really isolate the element from styles would be adding an iframe which is far from ideal.

CodePudding user response：

Are you using Sveltekit? Perhaps you could use the The CSS !important Rule in your Svelte component styles. Better yet, why not just change the class names?