html - Should Angular Elements Be Treated As Blocks or Wrappers -

when using element directives have seen angular element directives used in 2 ways:

1. block level components

the element styled display:block, component , children component's children, element component.

use of directive:

<example class="example"></example> 

the directive's html:

<header class="example-header"></header> <img class="example-image"> <footer class="example-footer"></footer> 

2. inline wrapper of component

the element left display:inline , acts invisible wrapper component itself:

use of directive:

<example></example> 

the directive's html:

<div class="example">   <header class="example-header"></header>   <img class="example-image">   <footer class="example-footer"></footer> </div> 

obviously each have advantages , disadvantages example markup, loss of layout context due inline element etc, is 1 correct way? or of angular's vagaries?

i'm surprised no 1 responded, idea behind creating custom directives ability create reusable pieces of code fulfill specific bit of functionality on site.

this functionality, however, doesn't care styles going use. can of course conditionally change classes , styles within angular, core component when dealing framework data.

with being said, there no "correct way" bolded in question. develop directive fit needs , style of site.