React and Vue strip attributes

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.

```js
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 = `

Hello, ${this.name}!

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

An example of using this custom element is ``.

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?