宣布here...
从Chrome 63开始，您不能使用阴影穿透选择器::shadow和/deep/来设置阴影根目录内内容的样式。
根据该页面，只有在使用Shadow DOM v0组件时才会受到影响。您可以使用shadow DOM polyfill，切换到Shadow DOM v1组件，或者将样式放置在组件中并使用:host：1

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范围界定模块第1级提供以下问题的答案：为什么影子主机这么奇怪：
影子宿主位于影子树之外，其标记由页面作者而不是组件作者控制。
如果一个组件在影子树样式表内部使用了某个类名，而使用该组件的页面作者不小心也使用了相同的类名，并将其放在影子主机上，这就不是很好的情况，这种情况会导致组件作者无法预测的意外样式化，页面作者调试起来也会很混乱。

1-代码段在Chrome v80中已停止工作，因为对Custom Elements v0的支持已被删除。以下是更新语法后的相同代码段：

一个一个三个一个一个一个一个一个四个一个一个一个一个一个五个一个