React and Vue strip attributes

[mvolkmann]

I'm trying to understand how React and Vue can report 100% compatibility. Here's an example of a simple Hello World web component that works fine in vanilla web apps and in web apps that use Solid or Svelte, but will not work with React or Vue.

class HelloWorld extends HTMLElement {
  name = "";

  constructor() {
    super();
    this.attachShadow({ mode: "open" });
  }

  connectedCallback() {
    this.name = this.getAttribute("name") || "World";
    this.render();
  }

  render() {
    const { shadowRoot } = this;
    if (shadowRoot) shadowRoot.innerHTML = `<p>Hello, ${this.name}!</p>`;
  }
}

if (!customElements.get("hello-world")) {
  customElements.define("hello-world", HelloWorld);
}

An example of using this custom element is <hello-world name="Sam"></hello-world>.

The problem is that when React and Vue see that the web component has a property with the same name as an attribute, they set the property to the attribute value and delete the attribute. When connectedCallback is called and that attempts to get the attribute value, null is returned. The web component could be modified to handle the case of the property already being set, but that feels wrong because it's a change that is only needed for compatibility with React and Vue.

Should React and Vue practice of removing attributes be considered wrong?