CODEWITHSUNDEEP
htmlangularjs
George Mauer
George Mauer

Reputation: 122102

Are custom elements created by Angular components sectioning elements?

When I use angular.component() or angular.directive() to create a custom element, is that treated as sectioning content or not?

That is to say, is it semantically and syntactically appropriate to generate a single header and footer internally, or does that count as being part of the containing element tree?

For example if I have 

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

And I use it so that the generated html is

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

Then what is the semantic? Is that a section which contains two header elements that are about the section? Or is it a section which contains zero header elements but two foo elements each with a header about the foo?

Upvotes: 1

Views: 189

Answers (2)

Max Koretskyi
Max Koretskyi

Reputation: 105497

Angular components/directives can generate any HTML tag, including those that are defined as sectioning, for example angular.directive('article'...), or as phrasing, for example angular.directive('a'...), or custom elements, like foo in your example.

So it seems that your question is not so much about angular, but rather about custom elements and specifically what category they fall under. From reading the spec you linked, it depends on what your custom element is doing. If it's used for sectioning, and it has a header as in your example, I think it can be viewed as sectioning content. If your custom element is used for getting input from user, for example a div with contenteditable=true, then it can be treated as interactive content.

Then what is the semantic? Is that a section which contains two header elements that are about the section?

It depends on what you intended it to be. But since it has header child element, I would view foo as sectioning content and would say that it's a section element without a header that contains two other sections with headers.

Upvotes: 1

Justin Obney
Justin Obney

Reputation: 1078

I don't think it would be correct to add the header footer unless it was wrapped by a sectioning element in the template or the custom element itself declared the correct ARIA role. My first thought was to see the rules in web components in which I think it would be valid if you were to extend a sectioning element

Upvotes: 2

Related Questions