I'm building a widget. When testing, the CSS works well but when I add it onto other websites, CSS clashes with existing website CSS and if the width is 800px, I get a width of only 546px.

Say if the class of that container is container box Can I fix that problem using reset?

.reset .containerbox  {
  text-decoration: none;
  padding: 10px;
  margin: 5px 15px 5px 0px;
  border-radius: 5px;
  width: 800px;
  font-size: small;
}

CodePudding user response：

The simplest solution is to

1. attach a shadowDOM to your outermost element.
2. Move your component's childNodes into the shadow DOM, along with its styles.

const cb = document.getElementById('containerbox');
cb.attachShadow({ mode: 'open' }).append(...cb.childNodes);

h1 { color: blue!important }
p { background-color: blue!important }

<div id="containerbox">
  <h1>Your component's HTML here</h1>
  <p>Not affected by outer page styles once it lives in your component's shadow DOM. (except CSS inheritance).</p>
  <style>
    :host { color: green; }
    h1 { color: red; }
    p { color: brown; }
  </style>
  Content without a specific tag surrounding it.
</div>

CodePudding user response：

u forget semicolon

.reset containerbox  {
  text-decoration: none;
  padding: 10px;
  margin: 5px 15px 5px 0px;
  border-radius: 5px;
  width:800px;
  font-size: small;

}