Web component design, attribute or content HTML?

Which one of these web components is designed better?

Option 1 contains an a tag within the custom element.

  <bootstrap-social service="github" size="lg">
<a href="http://github.com/reggi">Sign in with Github</a>
</bootstrap-social>


Option 2 the custom element has an href tag and the inner text is within the element.

  <bootstrap-social service="github" size="lg" href="http://github.com/reggi">
Sign in with Github
</bootstrap-social>

• I suspect the first would be preferable for graceful degradation... Aug 8 '14 at 2:05

1 Answer

Since the only difference between the two examples is the href attribute we see in DevDocs that:

Elements in HTML have attributes; these are additional values that configure the elements or adjust their behavior in various ways to meet the criteria the users want.

In the documentation, the only elements that receive the href attribute are: <a>, <area>, <base> and <link>. Although href works with any other element, I believe that, when it comes to semantics, Option 1 is the most suitable.

Sources: