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)?

Convolvulaceous

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.

Valuation

Just wanted to say I'm really enjoying this, and it makes so much more sense than section.custom-element-name all over my code. The DOM looks tidier as well :) – Convolvulaceous

Oh snap, I noticed something a little annoying though. If a custom element is used as the main router-view Aurelia won't insert the actual <custom-element> root element. Obviously this results in all my CSS not targeting the element any longer. I guess for router-views I'll still need a wrapping section or similar then... – Convolvulaceous

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>

Reverie