css - 影子 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;
}

但是桌面窗口没有收到样式。我究竟做错了什么？相同的语法似乎在这个代码笔(不是我)中起作用: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.

---

¹ - 该代码段已在 Chrome v80 中停止工作，因为对自定义元素 v0 的支持已被删除。这是具有更新语法的同一代码段:

class XProductProto extends HTMLElement {
  constructor() {
    super();
    
    const shadow = this.attachShadow({ mode: "open" });
    
    const 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";
    img.addEventListener("click", function (e) {
      window.location = this.getAttribute("data-url");
    });

    shadow.appendChild(img);

    const link = document.createElement("a");
    link.innerText = this.getAttribute("data-name");
    link.href = this.getAttribute("data-url");
    link.className = "product-name";

    shadow.appendChild(link);

    const 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);
  }
}
customElements.define("x-product", 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>