Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!doctype html>
<html>
<head>
  <title>ShadowRoot styling problem</title>
  <style>
    .selected {
      background: gray;
      color: white;
      font-style: italic;
    }
    
    #container {
      padding: 10px;
    }
  </style>
</head>
<body>
  <!--
    The author is unaware of styling in shadowRoot and therefore asks about the #container div below:
    * Why is there an orange border? (answer: the .selected rule in shadowRoot)
    * Where is the gray background? (answer: #container rule in shadowRoot made it white)
    * Why is 'Container' not italicized? (answer: #container rule in shadowRoot)
   -->
  <div id="container" class="selected">Container</div>
   
  <template>
    <style>
      .selected {
        border: 2px solid orange;
      }
      #container {
        background: white;
        color: black;
        font-style: normal;
      }
    </style>
    <content></content>
    <div id="container">
      <div>
        <h3>Section One</h3>
      </div>
      <div>
        <h3>Section Two</h3>
      </div>
      <div class="selected">
        <h3>Section Three</h3>
      </div>
    </div>
  </template>
  
  <script>
    var host = document.querySelector('#container');
    root = host.createShadowRoot();
    root.appendChild(document.querySelector('template').content.cloneNode(true));
    </script>
  </body>
  
  <h2>The author expects:</h2>
  <div style="background: gray; color: white; padding: 10px; font-style: italic;">
    Container
    <div style="background: white; color: black; font-style: normal;">
      <div>
        <h3>Section One</h3>
      </div>
      <div>
        <h3>Section Two</h3>
      </div>
      <div style="border: 2px solid orange;">
        <h3>Section Three</h3>
      </div>
    </div>
  </div>
</div>
  
</html>
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers