如何调整Google Cast按钮<google-cast-launcher>的尺寸与样式？

I've run into this exact issue before! The problem is that <google-cast-launcher> is a Web Component with its internal structure wrapped in Shadow DOM—this means standard CSS applied directly to the element won't penetrate into the actual icon/button inside. Here are two reliable ways to fix it:

1. Use Official CSS Custom Property (Simplest Method) #

The Cast Framework actually provides a built-in CSS variable to control the icon size, which is the cleanest solution. Just add this to your stylesheet:

google-cast-launcher {
  --cast-icon-size: 2em; /* Adjust this value to your desired size */
}

This variable is designed specifically to target the internal icon, so it should work without any hacks.

2. Modify Shadow DOM via JavaScript (If CSS Variable Doesn't Work) #

If for some reason the CSS variable approach doesn't work (older framework versions, for example), you can directly access the Shadow DOM to style the internal icon. Wait for the Cast API to load first, then target the icon element inside:

// Wait for Cast API to be available
window['__onGCastApiAvailable'] = function(isAvailable) {
  if (isAvailable) {
    const castButton = document.querySelector('google-cast-launcher');
    
    // Use a MutationObserver to wait for Shadow DOM to initialize
    const observer = new MutationObserver((mutations) => {
      if (castButton.shadowRoot) {
        const castIcon = castButton.shadowRoot.querySelector('.cast-icon');
        if (castIcon) {
          castIcon.style.width = '2em';
          castIcon.style.height = '2em';
          castIcon.style.maxWidth = '2em';
          castIcon.style.maxHeight = '2em';
          observer.disconnect(); // Stop observing once we've applied styles
        }
      }
    });
    
    observer.observe(castButton, { childList: true, subtree: true });
  }
};

This ensures we only modify the icon after the framework has fully initialized the button's Shadow DOM.

Why Your Original CSS Didn't Work #

When you tried google-cast-launcher { max-width: 2em; }, you were styling the outer Web Component wrapper—not the actual icon inside the Shadow DOM. Shadow DOM isolates internal styles from the main document, so your CSS couldn't reach the element that needed resizing.

内容的提问来源于stack exchange，提问作者Brad