Почему это правило @import не влияет на этот веб-компонент?

Question

const sheet = new CSSStyleSheet()
sheet.replace(`
  @import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');
  p {
    color: red;
    font-family: 'Roboto';
  }
`)
customElements.define('my-component',
  class extends HTMLElement {
    constructor() {
      super()
      const shadowRoot = this.attachShadow({
        mode: 'open'
      })
      shadowRoot.adoptedStyleSheets = [sheet]
      shadowRoot.innerHTML = '<p>my component</p>'
    }
  }
)

Проверьте здесь: https://jsfiddle.net/jdvivar/h1x2vs3u/

Создан пользовательский тег my-component, прикреплена тень root, и принятая таблица стилей скопирована внутрь. Я думаю, что он должен отображать содержимое с правильным шрифтом, но это не так. Применяется только цветовой стиль. Ты знаешь почему?