Web组件设计、属性还是内容HTML？

Question

这些web组件中哪一个设计得更好？

选项1在自定义元素中包含一个标记。

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

选项2自定义元素有一个href标记，内部文本位于元素中。

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

Answer 1

由于这两个示例之间唯一的区别是我们在href中看到的DevDocs属性：

HTML中的元素具有属性；这些是配置元素或以各种方式调整元素行为以满足用户需要的标准的附加值。

在文档中，接收href属性的唯一元素是：<a>、<area>、<base>和<link>。尽管href与任何其他元素一起工作，但我认为，在语义方面，选项1是最合适的。

源

• W3学校:属性
• DevDocs.io:属性引用
• HTML.com: Href属性:一个快速简单的指南