What's the right way of disabling the focus outline of the viewer?

[dmkrtz]

I know this isn't technically a question, but I'm trying to start a discussion about how to get rid of the white outline when using keys like R or Backspace.

Basically, I've implemented some keyboard shortcuts into my viewer system which for example, go back to the previous cam position when pressing Backspace or CTRL+Z, or reset the camera to the models'/viewers' default.
However, when pressing these buttons, the viewer gets focused, which looks odd.

Now I figured that the outline happens in the shadow-root's ".userInput" element.

After a lot of tries, and me chatting with ChatGPT more than I did with my parents this week, I came up with this snippet which seems to be the only working solution I figured out besides telling the CSS to do outline: none !important for all (*) elements when :focus and :focus-visible.

const viewer = const viewer = document.getElementById("viewer");

window.addEventListener("DOMContentLoaded", (event) => {
	// get rid of model-viewer focus-visible when pressing buttons 
	const observer = new MutationObserver(() => {
		const userInput = viewer.shadowRoot?.querySelector(".userInput");
		if (userInput) {
			userInput.style.outline = "none";
			observer.disconnect(); // Stop observing once applied
		}
	});
	// Start observing once model-viewer is ready
	viewer.updateComplete.then(() => {
		observer.observe(viewer.shadowRoot, { childList: true, subtree: true });
	});
});

What's your approach on getting rid of the outline? Is there anything less-hacky to achieve that?