All geek questions in one place

Custom elements can and should be customized

Usually, when I create a custom element, I wrap it in section or another appropriate HTML element and style, but this makes the DOM look like custom-element > section .

My question is: is it wrong to delete section and just treat custom-element as root element and style that?

For example, I have a custom element called tabs , right now when it used the DOM, it looks like tabs > div.tabs , but I would prefer to remove the div.tabs element if nothing happened to it.

So my question is, is it “wrong” to style my custom elements and treat them like any other HTML element, or should I completely ignore my custom elements (although this is hard to do when you use > and other selectors)?

+5
source share
2 answers

There is nothing wrong with custom element styles. To convince you, custom elements are valid HTML, and if you do not support an older browser less than Internet Explorer 9, you will need to do extra work for the browser to recognize them.

I customize the user elements all the time, I even customize the custom Aurelia <router-view> element.

+6
source

This is better...

Remember that CSS is the default display for a custom inline element.

Therefore, if you want to use border , width ..., you must explicitly specify display (e.g. inline-block ):

 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>
+1
source

Source: https://habr.com/ru/post/1264243/

More articles:


All Articles