title: Model-viewer outline
body: <pre><code>&lt;!doctype html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
  
  
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.js"&gt;&lt;/script&gt;
  &lt;script nomodule src="https://unpkg.com/@google/model-viewer/dist/model-viewer-legacy.js"&gt;&lt;/script&gt;
  &lt;!-- Use it like any other HTML element --&gt;
  &lt;model-viewer src="shared-assets/models/Astronaut.glb" alt="A 3D model of an astronaut" auto-rotate camera-controls&gt;&lt;/model-viewer&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>When you click on model viewer the outline appears, I am unable to remove the outline from the <code>model-viewer</code> how would one remove it?</p>
  
  <p><a href="https://i.stack.imgur.com/uT3J0.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/uT3J0.png" alt="When you click on model viewer the outline appears"></a></p>
  
  <p>Edit</p>
  
  <pre><code>/**
   * This is mixin function is designed to be applied to a class that inherits
   * from HTMLElement. It makes it easy for a custom element to coordinate with
   * the :focus-visible polyfill.
   *
   * @param {Function} SuperClass The base class implementation to decorate with
   * implementation that coordinates with the :focus-visible polyfill
   */
  export function FocusVisiblePolyfillMixin(SuperClass) {
    var coordinateWithPolyfill = function(instance) {
      // If there is no shadow root, there is no need to coordinate with the
      // polyfill. If we already coordinated with the polyfill, we can skip
      // subsequent invokcations:
      if (
        instance.shadowRoot == null ||
        instance.hasAttribute('data-js-focus-visible')
      ) {
        return;
      }
  
      // The polyfill might already be loaded. If so, we can apply it to the
      // shadow root immediately:
      if (self.applyFocusVisiblePolyfill) {
        self.applyFocusVisiblePolyfill(instance.shadowRoot);
      } else {
        // Otherwise, wait for the polyfill to be loaded lazily. It might never
        // be loaded, but if it is then we can apply it to the shadow root at
        // the appropriate time by waiting for the ready event:
        self.addEventListener(
          'focus-visible-polyfill-ready',
          function() {
            self.applyFocusVisiblePolyfill(instance.shadowRoot);
          },
          { once: true }
        );
      }
    };
  
    // IE11 doesn't natively support custom elements or JavaScript class syntax
    // The mixin implementation assumes that the user will take the appropriate
    // steps to support both:
    return class extends SuperClass {
      // Attempt to coordinate with the polyfill when connected to the document:
      connectedCallback() {
        super.connectedCallback &amp;&amp; super.connectedCallback();
        coordinateWithPolyfill(this);
      }
    };
  }
  </code></pre>
  
  <p>So I added this in file name <code>focus-visible.js</code></p>
  
  <p>added this to html </p>
  
  <pre><code>&lt;body&gt;
      &lt;!-- The :focus-visible polyfill removes the focus ring for some input types --&gt;
      &lt;script src="focus-visible.js" defer&gt;&lt;/script&gt;
      &lt;script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.js"&gt;&lt;/script&gt;
      &lt;script nomodule src="https://unpkg.com/@google/model-viewer/dist/model-viewer-legacy.js"&gt;&lt;/script&gt;
      &lt;!-- Use it like any other HTML element --&gt;
      &lt;model-viewer src="shared-assets/models/Astronaut.glb" alt="A 3D model of an astronaut" auto-rotate camera-controls&gt;
      &lt;/model-viewer&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>and this in css <code>:focus-visible polyfill{ outline: none; }</code></p>
  
  <p>Am I doing something wrong?</p>