Safari不支持adoptedStyleSheets，挂载构造的CSSStyleSheet有何替代方案？

除了你提到的创建<style>元素的方式，还有以下几种可行方案：

1. 复用已有的样式元素 #

如果页面中已经存在定义好样式的<style>或外部样式表的<link>标签，可以直接将它们克隆后添加到Shadow DOM中，适合多Shadow Root共享样式的场景：

const shadowRoot = element.attachShadow({ mode: 'open' });
// 克隆复用页面内的style元素
const sharedStyle = document.querySelector('#shared-shadow-style');
shadowRoot.appendChild(sharedStyle.cloneNode(true));
// 克隆复用外部样式表的link元素
const sharedLink = document.querySelector('#shared-external-style');
shadowRoot.appendChild(sharedLink.cloneNode(true));

2. 通过CSS变量动态注入样式 #

先在全局定义CSS变量，再在Shadow DOM的内部样式中引用这些变量，后续只需修改全局变量值就能同步更新Shadow内的样式：

/* 全局样式定义变量 */
:root {
  --shadow-container-bg: #ffffff;
  --shadow-text-color: #333333;
}

const shadowRoot = element.attachShadow({ mode: 'open' });
shadowRoot.innerHTML = `
  <style>
    .container {
      background: var(--shadow-container-bg);
      color: var(--shadow-text-color);
      padding: 1rem;
    }
  </style>
  <div class="container">Shadow DOM 内容</div>
`;
// 动态修改样式
document.documentElement.style.setProperty('--shadow-container-bg', '#f5f5f5');

3. 使用Constructable Stylesheets polyfill #

引入社区维护的polyfill抹平浏览器差异，这样就能继续使用adoptedStyleSheets的原生API：

// 先引入对应polyfill（如@webcomponents/webcomponentsjs包）
import '@webcomponents/webcomponentsjs/webcomponents-bundle.js';

// 正常使用adoptedStyleSheets API
const sheet = new CSSStyleSheet();
sheet.replaceSync(`
  .container {
    border: 1px solid #eee;
    border-radius: 4px;
  }
`);
const shadowRoot = element.attachShadow({ mode: 'open' });
shadowRoot.adoptedStyleSheets = [sheet];

注意：polyfill会增加代码体积，需要根据项目兼容性需求权衡使用。

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