title: Do custom HTML elements inherit parent CSS styles?
body: <p>When creating custom elements in HTML, does the child tag inherit the parent's CSS styles?</p>
  
  <p>Here is my test case, from Chrome:</p>
  
  <pre><code>var h1bProto = document.registerElement ('h1-b', 
  {
    prototype: Object.create (HTMLHeadingElement.prototype),
    extends: "h1"
  });
  </code></pre>
  
  <p>When I append a child using the new h1bProto it generates an H1 tag with is="h1-b", example below:</p>
  
  <pre><code>var node = document.body.appendChild (new hibProto());
  node.textContent = "Hello";
  
  &lt;h1 is="h1-b"&gt;Hello&lt;/h1&gt;
  </code></pre>
  
  <h1>Hello</h1>
  
  <p>This gives me the parents CSS styles.  However, if I add a node by creating the element first, then appending the node, the code looks like this:</p>
  
  <pre><code>var node = document.createElement ("h1-b");
  node.textContent = "Hello";
  document.body.appendChild (node);
  
  &lt;h1-b&gt;Hello&lt;/h1-b&gt;
  </code></pre>
  
  <p>Hello</p>
  
  <p>Am I missing something, or do children not inherit the parent's CSS styles? If they don't, then is the best work around to use the Shadow DOM?</p>