Style custom elements in HTML5

Question

I'm creating an Aurelia project and use custom-elements for my views. I read that it's better practice to use custom elements because of the scope they live in, but I am doubtful about how to style them properly.

To get the background-color to fill the custom-element for example, I need to make it display:block. This needs to be done for a LOT of elements.

div {
  background-color:green;
}

div:first-child customelement {
  display:block;
}

customelement {
  background-color:blue;
}

<div>
  <customelement>
    <h1>test</h1>
  </customelement>
</div>

<div>
  <customelement>
    <h1>test</h1>
  </customelement>
</div>

Is there a simple way to make this generic for all custom elements? Perhaps any SCSS method to target every non-existing HTML5 element?

Answer 1

HTML Custom Elements by default are defined as an undefined element, similar to a span. As an undefined element which the browser has never seen before, they have no default user agent styling and will be given inherited values and will be seen as an inline element which is the default for all elements apart from when a user agent stylesheet overrides it due to conforming with the W3C Recommendated defaults.

Your only option is to really have all of the elements at the top of your CSS style defined as a block level element.

customelement, customelement2 {
  display: block;  
}
div {
  background-color:green;
}

customelement {
  background-color:blue;
}

customelement2 {
  background-color: red;
}
  

<div>
  <h1>Not Custom  
</div>
<div>
  <customelement>
    <h1>Custom Element</h1>
  </customelement>
</div>

<div>
  <customelement2>
    <h1>Custom Element 2</h1>
  </customelement2>
</div>

You can read more here (W3C Custom elements) and specifically this line in the 3rd paragraph

While the script is loading, the img-viewer element will be treated as an undefined element, similar to a span.