Question

当我使用angular.component()或angular.directive()创建自定义元素时，是否将其视为sectioning content？

也就是说，它在语义和语法上是否适合在内部生成单个header和footer，或者它是否算作包含元素树的一部分？

例如，如果我有

angular.component('foo', {
  template: `<header>Yay</header>`
})

我使用它以便生成的html是

<section>
   <foo>
      <header>Yay</header>
   </foo>
   <foo>
      <header>Yay</header>
   </foo>
</section>

那么语义是什么？这是一个section，其中包含两个关于该部分的header元素吗？或者它是section，它包含零个标题元素，但有两个foo元素，每个元素都有一个关于foo的标题？

Answer 1

我不认为添加页眉页脚是正确的，除非它被模板中的sectioning元素包装或者自定义元素本身声明了正确的ARIA角色。我的第一个想法是看到Web组件中的规则，如果你要扩展一个分区元素，我认为它是有效的

Answer 2

Angular组件/指令可以生成任何HTML标记，包括定义为sectioning的标记，例如angular.directive('article'...)或phrasing，例如angular.directive('a'...)，或者自定义元素，例如示例中的foo。

所以看起来你的问题不是关于角度，而是关于自定义元素，特别是它们属于哪个类别。从阅读您链接的规范，它取决于您的自定义元素正在做什么。如果它用于切片，并且它的示例中有标题，我认为它可以被视为sectioning content。如果您的自定义元素用于获取用户的输入，例如div contenteditable=true，则可将其视为interactive content。

那么语义是什么？这是一个包含两个标题的部分关于该部分的元素？

这取决于你的意图。但由于它有header子元素，因此我会将foo视为sectioning content，并会说它是一个section元素，没有包含其他两个带标题的标题的标题。

是否由Angular组件创建了自定义元素？

2 个答案: