WebComponent styles overriding my application bootstrap styles completely

venkatgarlapati commented 3 years ago

Describe the bug

When i am trying to integrate the stoplight elements component with my application it is overriding my existing styles completely.

To Reproduce

Integrate elements webcomponent with existing bootstrap styled application

Expected behavior

Elements webcomponent styles should limit to the component it self.

Additional context

https://unpkg.com/@stoplight/elements@7.3.5/styles.min.css It seems like couple of styles written in the elements level globally, instead of that maybe we need to restrict it to the component level

blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}button{background-color:initial;background-image:none}

Screenshots If applicable, add screenshots to help explain your problem. Before injecting the stoplight elemnents styles it is displaying in different way after injecting the web component with my application UI changed completly.

Environment (remove any that are not applicable):

Library version: [e.g. 7.3.5]
OS: Windows 10
Browser: Chrome
Platform: Web

hirenoble commented 3 years ago

I'm facing the exact same issue! importing @stoplight/elements/styles.min.css is messing up the css for the unordered and ordered list for the whole site. Before:

After:

ajrice6713 commented 2 years ago

Seeing this behavior as well - attempted to implement the elements react component into my docusaurus site and its overriding all of my other site css. Would be awesome to have the elements css gated to the elements component so that this could be embedded anywhere easily.

GideonShils commented 1 year ago

Just bumping up this issue. Any chance we can get a hosted version of the styles that doesn't include the CSS resets?

gvangool commented 1 year ago

We've solved this by using postcss-nested-import and postcss-nested.

Our new style sheet is (stored in assets/css):

@import "@stoplight/mosaic/themes/default.css";

elements-api {
  @nested-import "../../node_modules/@stoplight/elements/styles.min.css";
}

PostCSS config:

module.exports = {
  plugins: [
    require("postcss-nested-import"),
    require("postcss-nested"),
    require("autoprefixer"),
  ],
};

hhtdev commented 8 months ago

Any news on this ? I'm experiencing this issue and i'd like to know what's the recommended approach from the Stoplight team ?

stoplightio / elements