无需唯一类/id，如何让style标签样式仅作用于所属父容器及其子元素？

问题背景 #

假设我们有一段自动生成的HTML和CSS片段，需要保证其中的CSS只会作用于片段内部，不会影响外部内容。
现有基础代码如下：

<div class="text">I am outside and should not be red.</div>
<div>
  <div class="text">I am inside and should be red.</div>

  <style type="text/css">
    .text {
      color: red;
    }
  </style>
</div>

上述代码的渲染效果如下：

我们需要调整<style>标签的实现逻辑，让其中的样式仅作用于它的父级<div>容器及其子元素。要求不能使用唯一ID或自定义类实现，因此下面的方案虽然能达到效果，但不符合当前场景要求：

<div class="text">I am outside and should not be red.</div>
<div class="sandbox">
  <div class="text">I am inside and should be red.</div>

  <style type="text/css">
    .sandbox .text {
      color: red;
    }
  </style>
</div>

实际业务场景说明

这些HTML、样式（及JS）都是由用户独立编写的，系统会统一包裹后按需注入到页面DOM中。我们的目标是让这些注入的代码块仅作用于自身的最外层容器，不需要依赖代码编写者为所有CSS选择器添加唯一前缀，避免人为失误，自动将代码块内所有<style>的样式作用域限定到包裹它的自动生成的父元素上。
用户提交的原始代码块示例：

<div class="text">I am inside and should be red.</div>

<style type="text/css">
  .text {
    color: red;
  }
</style>

服务端会自动为其包裹一层<div>后返回，最终形式如下：

<div>
  <div class="text">I am inside and should be red.</div>

  <style type="text/css">
    .text {
      color: red;
    }
  </style>
</div>

我们现在需要解决的就是如何限定代码块内所有<style>元素的作用域，让其仅生效于外层包裹容器。之前可以通过<style>的scoped属性实现该能力，但该属性已经被废弃，除了使用polyfill之外，还有哪些可行的替代方案？

可行替代方案 #

这里给出两种生产环境常用的实现方案，都不需要使用自定义类或唯一ID：

• 方案1：使用原生CSS @scope 规则
  @scope是CSS原生支持的作用域规则，目前主流浏览器都已经兼容，可以直接使用。
  服务端处理用户提交的样式内容时，只需要自动给所有CSS规则外层套一层@scope声明，指定作用域根为当前style标签的父元素即可，改造后代码如下：

  <div>
    <div class="text">I am inside and should be red.</div>
  
    <style type="text/css">
      @scope (:parent) {
        .text {
          color: red;
        }
      }
    </style>
  </div>
  

  该方案完全不需要修改外层容器的属性，也不需要用户调整样式写法，自动完成作用域隔离，性能损耗极低。如果需要兼容旧版本浏览器，可以配合轻量的@scope polyfill使用，比完整的scoped属性polyfill体积小很多。
• 方案2：使用Shadow DOM隔离
  如果需要更强的隔离能力（不仅样式隔离，还要避免用户JS操作全局DOM），可以把用户提交的整个代码块注入到Shadow DOM中。Shadow DOM内部的样式默认完全不会泄露到外部DOM，外部的样式也默认不会影响Shadow DOM内部的内容，完全符合需求。
  前端注入代码的示例逻辑如下：

  // 服务端返回的用户代码块
  const userContent = `
  <div class="text">I am inside and should be red.</div>
  <style type="text/css">
    .text {
      color: red;
    }
  </style>
  `
  // 自动生成的外层容器
  const wrapper = document.createElement('div')
  // 开启Shadow DOM
  const shadowRoot = wrapper.attachShadow({ mode: 'open' })
  // 把用户代码写入Shadow DOM
  shadowRoot.innerHTML = userContent
  // 插入到页面对应位置即可
  document.body.appendChild(wrapper)
  

  该方案不需要修改用户的任何代码，也不需要服务端对样式做额外处理，隔离性最强，适合对安全性要求较高的场景。

内容的提问来源于stack exchange，提问作者Josh M.