NOTE: this a "show don't tell" PR, and I'm guessing it may require changes to other parts of the library, but before adding docs or tests, I want to test the waters.

Working with custom elements, it is almost always necessary (except for the simplest of components) to get a hold of the root of the element, for instance to register event handlers to communicate with other parts of the DOM.

So, a Web component needs to do something like this:

functionMyComponent(props:{/* ... */}){constself=useRef<HTMLDivElement>();useEffect(()=>{constroot=self.current?.parentElementasHTMLElement;if(!root)return;consthandler=(ev:Event)=>{/* ... */};root.addEventListener("my-event",handler);return()=>root.removeEventListener("my-event",handler);});return<divref={selfasRef<HTMLDivElement>}>...content...</div>;}register(MyComponent,"my-component",["prop1","prop2"]);

I propose adding the root element as prop. This is a very minimal change that would make the API a lot cleaner:

functionMyComponent(props:Props&{customElementRoot:HTMLElement}){useEffect(()=>{consthandler=(ev:Event)=>{/* ... */};customElementRoot.addEventListener("my-event",handler);return()=>customElementRoot.removeEventListener("my-event",handler);});return<div>...content...</div>;}register(MyComponent,"my-component",["prop1","prop2"]);

This is just one option, another one could be to have some sort of hook to pick up the root element, but I think that would be a bit more complicated to setup. I like this change because is very minimal and should not even conflict with people that already have that prop name (unlikely as that might be).

Also, since the Component function is always calledafter the DOM element has been instantiated, it makes sense to make it available to the component without needing to use a Ref.