no-constructor-attributes error when manipulating the Shadow DOM

[nweldev]

Using this.shadowRoot.append() in a WC constructor leads to a wc/no-constructor-attributes error.

class Demo extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: "open" });

    // ERROR: Attributes must not be interacted with in the constructor as the element may not be ready yet.
    // eslintwc/no-constructor-attributes
    this.shadowRoot.append(
      p(button("previous", "<"), button("next", ">"))
    );
  }
}

Yet, the standard only restricts manipulations of the light DOM, and manipulating the Shadow DOM doesn't lead to any runtime error.

IMO, this is a false positive.

[43081j]

i had a read through the spec again, it is pretty vague around mutating children in the constructor. so i looked up the examples by the polymer team back when they documented v1 of the spec, and their example does in fact create a shadow dom tree in the constructor. so it seem you're right, good catch.

mutating the shadow dom's children = fine
mutating the light dom's children = not fine

ill see if i can look into fixing it this weekend unless you want to have a stab at it

[nweldev]

And ... done 😃 Thanks