：目標CSS選擇器無法在聚合物中工作

Question

我正在使用Polymer，並且發現:target css選擇器不起作用。

例如

<polymer-element name="my-element" noscript>
    <template>
        <style>
            :target {
                border: 2px solid red;
            }
        </style>
        <div id="test">This is a :target test</div>
    </template>
</polymer-element>

<a href="#test">Click me</a>
<my-element></my-element>

演示

有什么建議可以解決這個問題嗎？

Answer 1

我必須承認：我對陰影DOM不太熟悉，對Polymer也不是很熟悉，但是我想告訴您我的觀點，因為您的意圖對我來說有點奇怪，並且這個評論太長了。

短

您不能在影子主機中使用偽選擇器:target 。

---

長

不幸的是，我無法在這些資源中找到明確的證據

• http://www.w3.org/TR/shadow-dom/
• http://dev.w3.org/csswg/css-scoping/

但有些提示...

Web組件的目標是使我們能夠構建可在文檔中使用的單個且隔離的組件，而無需關心其內部功能或樣式。

如果某個組件可以直接到達“外部”文檔，或者如果外部文檔可以直接到達任何影子主機元素，那么這將完全破壞Web組件的意圖。

想象一下，如果您插入兩個<my-element>實例會發生什么。 兩者都包含相同的ID，應該針對哪個ID？

當然，可以從影子文檔中訪問影子文檔或包含文檔，但只能分別通過::shadow或:host 。

在我看來，瀏覽器不能僅使用:target選擇器來選擇元素，因為目標是文檔的問題（它的URL指向某個ID）而不是任何影子DOM。 也不可能通過容器document中的 document.getElementById()到達影子樹節點。

CSS作用域規范也可以滿足Shadow DOM概念的要求：

為什么影子主機如此怪異？

影子主機位於影子樹之外，其標記由頁面作者（而不是組件作者）控制。

如果組件在影子樹內部內部使用了特定的類名，那不是很好，而使用該組件的頁面作者也偶然使用了相同的類名，並將其放在主機元素上。 這樣的情況將導致組件設計師無法預測的意外樣式，並使頁面作者無法調試。

（ 3.1.1。影子樹中的主機元素 ）

我想說這是另一個證據：影子主機（從外部查看）本身在處理樹內焦點時將保持活動（焦點）狀態。

為了保持封裝，必須調整Document對象的焦點API屬性activeElement的值。 為了防止在調整此值時丟失信息，每個影子根還必須具有activeElement屬性，以將聚焦元素的值存儲在影子樹中。

（ 6.3活動元素 ）

---

一種解決您的問題的方法

如果您的意圖是僅突出顯示div ，而陰影元素為:target ed，則這可能是陰影文檔中的正確樣式：

<polymer-element name="my-element" constructor="" attributes="">
  <template>
     <style>
         :host(:target) #inner {
             color: #0c0;
         }
     </style>
     <content>Hello World!</content>
     <div id="inner">This is a :target test</div>
...

當陰影元素<my-element id="outer"></my-element>被#outer定位時， #outer用綠色文本突出顯示<div> 。

如果這不是您的意圖，並且您確實希望能夠從外部定位#inner ，那么我說這是不可能的 （請參閱“較長”部分；）。

Answer 2

我認為鏈接到Shadow dom內部的元素不是一個好主意，因為您可能在同一頁面中具有外部元素的多個實例，因此您將獲得具有相同id的多個元素。

但是，當您使用#elementId請求url時，瀏覽器將僅在dom #elementId中查找相應元素。

如果仍然需要設置陰影dom元素的樣式，則可以模擬:target選擇器：

<polymer-element name="my-element" constructor="" attributes="">
  <template>
    <style>
      #inner[target] {
        border: 2px solid red;
      }
    </style>
    <content>Hello World!</content>
    <div id="inner" target?="{{innerTargetted}}">This is a :target test</div>
  </template>
  <script>
    Polymer('my-element', {
      ready: function() {
        $(window).on('hashchange', function() {
          this.innerTargetted = window.location.hash == '#inner';
        }.bind(this));
      }
    });
  </script>
</polymer-element>

演示