Shadow DOM中的：root CSS选择器

Question

为什么未应用在影子DOM中用：root选择器声明的CSS变量（CSS自定义属性）？

let container = document.getElementById('container');
let shadow = container.attachShadow({mode: 'open'});

shadow.innerHTML=`
  <style>
      :root{
          --my-color : red;
      }
      span{
          color: var(--my-color);
      }
  </style>
  <span>I SHOULD BE RED</span>
`;

<div id="container"></div>