updates to custom elements

[scottaohara]

Closes #180

Updates autonomous custom elements and form associated custom elements to indicate that they have no corresponding role if an author did not define a role in the custom element’s ElementInternals.

The allowed roles and properties column has been updated to indicate that if a custom element has an author defined role, then the allowed roles to that element must adhere to the defined role of the custom element.

I'm thinking it's probably a good idea to add an example, at the end of section 2, to help demonstrate proper conformance here.

e.g.
<my-element> with no role defined from its ElementInternals can accept any role.

but if <my-check> were created and had its role defined via its internals...

class MyCheckbox extends HTMLElement {
  static get formAssociated() { return true; }
  static get observedAttributes() { return ['checked']; }

  constructor() {
    super();
    this._internals = this.attachInternals();
    this.addEventListener('click', this._onClick.bind(this));

    this._internals.role = 'checkbox';
    this._internals.ariaChecked = false;
  }
  // ...

(example from the pending PR to the HTML spec)
Then only roles allowed on a checkbox would be allowed on this custom element.

That all said, we shouldn't merge this update until the linked HTML and ARIA issues in #180 are merged.

cc @carmacleod

---

Preview | Diff

[carmacleod]

Looks good.
Agree that an example would be really useful in this case.
How does this document refer to examples in section 2?
i.e. For the fish example, I would have thought that the role img table row might refer to it (e.g. "See EXAMPLE 2"), but I don't see any reference?

[scottaohara]

yes, no references presently. we should make them

[mtrootyy]

whatwg/html#4658 was merged.

[carmacleod]

Also w3c/aria#984 was merged. So I think the "not ready for merge" label can be removed now.