I have plan to develop the microservice platform for my APP....
Here I'm facing some CSS-overwriting problems
how to prevent my common tag-based (input,a,span) style overwrite from other app styles?
I've integrated my app to another side as embed view, how can i prevent styles overwriting problem? can i use web-component?
If I'm understanding your question you have this going on:
/* your code */ a {} /* their code */ a {}Generally you shouldn't do detailed styling directly on element tags as they as such weak selectors. You're essentially hoping your style will load last, which you can't really guarantee.
You need to put your CSS into a namespace or follow a CSS architecture.
A really simple namespace approach:
/* your code */ .your-app-namespace a {} /* their code */ a {}Ensure your application's outermost element has
class="your-app-namespace"and your styles should apply:<a href="example.com">Their link style</a> <div class="your-app-namespace"> <a href="example.com">Your link style</a> </div>If the other styles have stronger selectors you will have to increase your selector weight until it works. How you do that depends on the selector weight of the competing CSS.
Web components, css-in-js etc will also work but to be honest you should probably try a simpler approach first as it may be all you need (much less code).