Q220: How do you access imperative API of web components? - React & Modern Frontend (445 Qs)

Web Components often expose an imperative API to implement its functions. You will need to use a ref to interact with the DOM node directly if you want to access imperative API of a web component. But if you are using third-party Web Components, the best solution is to write a React component that behaves as a wrapper for your Web Component.

Practical Code Example

jsx

// Accessing imperative Web Component APIs via React Refs:
function WebComponentWrapper() {
  const customElRef = useRef(null);

  useEffect(() => {
    customElRef.current?.addEventListener('customEvent', handleEvent);
    return () => customElRef.current?.removeEventListener('customEvent', handleEvent);
  }, []);

  return <my-custom-element ref={customElRef} />;
}