Question

我有两个自定义元素

<desktop-canvas id="desktop">
  #shadow-root (open) 
    <desktop-window>
    </desktop-window>
<desktop-canvas>

我正在尝试设置<desktop-window>的样式，

#desktop::shadow desktop-window {
  background-color: red;
  padding: 25px;
  margin: 25px;
  display: block;
}

但是桌面窗口无法接收样式。我究竟做错了什么？相同的语法似乎在此Codepen中起作用（不是我本人）：https://codepen.io/matt-west/pen/FtmBL

Answer 1

已宣布here ...

从Chrome 63开始，您不能使用阴影穿刺选择器::shadow和/deep/在阴影根内部设置样式。

根据该页面，仅当您使用Shadow DOM v0组件时，您才会受到影响。您可以使用阴暗的DOM polyfill，切换到Shadow DOM v1组件或将样式放置在组件内部并使用:host：

var XProductProto = Object.create(HTMLElement.prototype);

XProductProto.createdCallback = function() {
  var shadow = this.createShadowRoot();

  var img = document.createElement('img');
  img.alt = this.getAttribute('data-name');
  img.src = this.getAttribute('data-img');
  img.width = '150';
  img.height = '150';
  img.className = 'product-img';

  shadow.appendChild(img);

  img.addEventListener('click', function(e) {
    window.location = this.getAttribute('data-url');
  });

  var link = document.createElement('a');
  link.innerText = this.getAttribute('data-name');
  link.href = this.getAttribute('data-url');
  link.className = 'product-name';

  shadow.appendChild(link);
  var styleEl = document.createElement('style');
  styleEl.innerHTML = `
:host .product-img {
  cursor: pointer;
  background: #FFF;
  margin: 0.5em;
}
:host .product-name {
  display: block;
  text-align: center;
  text-decoration: none;
  color: #08C;
  border-top: 1px solid #EEE;
  font-weight: bold;
  padding: 0.75em 0;
}`;
  shadow.appendChild(styleEl);
};


var XProduct = document.registerElement('x-product', {
  prototype: XProductProto
});

body {
  background: #F7F7F7;
}

x-product {
  display: inline-block;
  float: left;
  margin: 0.5em;
  border-radius: 3px;
  background: #FFF;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  font-family: Helvetica, arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

<x-product data-name="Ruby" data-img="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4621/ruby.png" data-url="http://example.com/1"></x-product>
<x-product data-name="JavaScript" data-img="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4621/javascript.png" data-url="http://example.com/2"></x-product>
<x-product data-name="Python" data-img="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4621/python.png" data-url="http://example.com/3"></x-product>

CSS Scoping Module Level 1提供了以下答案：为什么影子主机如此怪异？：

影子主机位于影子树之外，其标记由页面作者（而不是组件作者）控制。

如果组件在影子树样式表中内部使用了特定的类名，那将不是很好，而使用该组件的页面作者也偶然使用了相同的类名，并将其放在影子主机上。这种情况将导致意外的样式，使组件作者无法预测，并且使页面作者无法调试。

影子dom中的样式元素

1 个答案: