Can and should you style custom elements

Question

Usually when I create a custom element I wrap it in a section or other appropriate HTML element and style that, but this leads the DOM looking like custom-element > section.

My question is, is it wrong to remove the section and simply treat custom-element as the root element and style that?

For example I have a custom element called tabs, right now when it's used the DOM ends up looking like tabs > div.tabs but I'd prefer to remove the div.tabs element if there's nothing wrong with that.

So my question is is it "wrong" to style my custom elements and treat them as any other HTML element, or should I continue to ignore my custom elements completely (even though it's hard to do so when you use > and other selectors)?

Answer 1

There is absolutely nothing wrong with styling custom elements. To reassure you, custom elements are valid HTML and unless you're supporting an older browser less than Internet Explorer 9, then you'll need to do some extra work to get the browser to recognise them.

I style custom elements all of the time, I even style Aurelia's <router-view> custom element as well.

Answer 2

It's better...

Don't forget that the default CSS display for a custom element is inline.

So if you want to use border, width... you should explicitly set display (to inline-block for example):

custom-element {
  background: lightgreen;
  width: 60px;
  border: 1px solid blue;
}
.ok {
  display: inline-block;
}

<custom-element>This is
  <div>ugly</div>
</custom-element>
<hr>
<custom-element class="ok">That's
  <div>fine</div>
</custom-element>