title: CSS In JS vs Shadow DOM
body: <p>Webcomponents use the shadow dom for style encapsulation . From the specifications you know that the styles inside the shadow root are locally scoped . What would be the effect on memory when you instantiate the same webcomponent multiple times ? Ex : You instantiate your custom button webcomponent 10 times .</p>
  
  <p>Example</p>
  
  <pre><code>#Shadow-root
  &lt;style&gt;
  .outer {
    border: 2px solid brown;
    border-radius: 1em;
    background: red;
    font-size: 20pt;
    width: 12em;
    height: 7em;
    text-align: center;
  }
  .inner {
    color: white;
    font-family: sans-serif;
    padding: 0.5em;
  }
  .name {
    color: black;
    background: white;
    font-family: "Marker Felt", cursive;
    font-size: 45pt;
    padding-top: 0.2em;
  }
  &lt;/style&gt;
  &lt;div/&gt;
  </code></pre>
  
  <p>I might import the style.css or place something inline like above .  There might be props to the custom element and based on the props the component behaviour keeps changing .  Now if such a component gets repeated 50 times , then I would see the inline style also getting repeated 50 times . Does browsers do any optimization between instances ?</p>
  
  <p>If the style is getting duplicated then isnt the css in js a better solution than shadow dom for encapsulation ? You could really optimize the css thats used in the entire dom with a decent jss generation plugin. </p>