Description

When a React ref is passed a React-wrapper component, then an attribute like l="[Object object] ends up in the DOM.

Steps to Reproduce

1. Write this code

import { useRef } from "react";
import { MyReactInput } from "./web-component";

export default function App() {
  const ref = useRef();

  return (
      <MyReactInput ref={ref} />
  );
}

2. See this output...

Live Reproduction Link

Used Codesandbox as its what I am familiar with:

https://codesandbox.io/s/goofy-lederberg-bjiwkb?file=/src/App.tsx:794-857

Expected Results

No unexpected attributes added to DOM.

Actual Results

<my-input l="[Object object]"></my-input>

Browsers Affected

• Chrome
• Firefox
• Safari 14

Didn't test the rest:

• Edge
• Safari 11
• Safari 10
• IE 11