阴影中的样式元素 dom

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;
}

但是桌面-window 没有收到样式。我究竟做错了什么？相同的语法似乎在这个代码笔中起作用（不是我的）：https://codepen.io/matt-west/pen/FtmBL

Answer 1

已公布here...

Starting in Chrome 63, you cannot use the shadow-piercing selectors ::shadow and /deep/ to style content inside of a shadow root.

根据该页面，您只有在使用 Shadow DOM v0 组件时才会受到影响。您要么使用 shady 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 提供了一个答案：为什么影子主机这么奇怪？:

The shadow host lives outside the shadow tree, and its markup is in control of the page author, not the component author.

It would not be very good if a component used a particular class name internally in a shadow tree stylesheet, and the page author using the component accidentally also used the the same class name and put it on the shadow host. Such a situation would result in accidental styling that is impossible for the component author to predict, and confusing for the page author to debug.

阴影中的样式元素 dom

Styling element in shadow dom

css

shadow-dom