如何在大多數孩子之后寫出選擇特定元素*的影子dom？

Question

我正在編寫一個自定義的<figure> <figcaption>元素，我想在主要內容下放置一個<figcaption> 。 <figcaption>需要從自定義元素的子節點中包含一些內容（具有潛在格式的文本），我正在使用<content select="span.caption"></content> 。 但是，根據Shadow DOM規范， <span>已經分發到早期的<content></content>元素，該元素布置了自定義元素的主體。

我已經嘗試使用<content select=":not(span.caption)"></content>來避免分發標題，但這似乎不是復合選擇器而且什么都不匹配。

什么是讓元素按我想要的順序渲染的推薦方法？

這是有問題的代碼，也在http://jsbin.com/vizoqusu/3/edit ：

<!DOCTYPE html>
<html>
<head>
  <script src="//cdnjs.cloudflare.com/ajax/libs/polymer/0.1.4/platform.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/polymer/0.1.4/polymer.js"></script>
  <meta charset="utf-8">
</head>
<body>
  <polymer-element name="my-figure" noscript>
    <template>
      <figure>
        <content></content>
        <figcaption>Figure 7: <content select="span.caption"></content></figcaption>
      </figure>
    </template>
  </polymer-element>

  <my-figure>
    Hello World!
    <span class="caption">The caption</span>
  </my-figure>
</body>
</html>

Answer 1

我在這里看到幾個選項：

您可以使用getDistributedNodes首先獲取元素的內容，然后在正確的點注入文本（Hello World）和標題，如下所示：

  <polymer-element name="my-figure">
    <template>
      <figure id="figureHolder">
        <content id="content"></content>
        <figcaption>Figure 7: <content id="caption" select="span.caption"></content></figcaption>
      </figure>
    </template>

    <script>
  Polymer('my-figure', {
    caption: '',
    ready: function() {
      var nodes = this.$.content.getDistributedNodes();
      this.$.caption.innerHTML = nodes[1].innerHTML;
      this.$.content.getDistributedNodes()[0].data = nodes[0].data;
      this.$.content.getDistributedNodes()[1].innerHTML = '';
    }
  });
      </script>
  </polymer-element>

  <my-figure>
    Hello World!
    <span class="caption">The caption</span>
  </my-figure>

您可以將標題移動到屬性中，這樣可以保持圖形內容與標題本身之間的清晰分離：

  <polymer-element name="my-figure" attributes="caption" noscript>
    <template>
      <figure>
        <content></content>
        <figcaption>Figure 7: {{caption}} </figcaption>
      </figure>
    </template>
  </polymer-element>

  <my-figure caption="The caption">
    Hello World!
  </my-figure>

您可以將主要內容（例如Hello World ）移動到其自己的span並添加一個類以允許直接從template內部對其進行定位，因此：

 <polymer-element name="my-figure" noscript>
    <template>
      <figure>
        <content select="span.hello"></content>
        <figcaption>Figure 7: 
          <content select="span.caption"></content></figcaption>
      </figure>
    </template>
  </polymer-element>

  <my-figure>
    <span class="hello">Hello World!</span>
    <span class="caption">The caption</span>
  </my-figure>

Answer 2

這實際上今天在ShadowDOM polyfill下工作，有兩點需要注意：

：不僅需要簡單的選擇器作為參數，因此您需要執行類似*:not(.caption)
如果您完全使用選擇器，則忽略純文本節點，因此您必須將其他內容包裝在某種元素中。

這是一個例子：

http://jsbin.com/vizoqusu/5/edit

  <polymer-element name="my-figure" noscript>
    <template>
      <figure>
        <content select="*:not(.caption)"></content>
        <figcaption>Figure 7: <content select="span.caption"></content></figcaption>
      </figure>
    </template>
  </polymer-element>

  <my-figure>
    <span>Hello World!</span>
    <span class="caption">The caption</span>
  </my-figure>

至於本機系統，我使用你的用例爭論在規范中包含：not（），你可以在這里看到它：

https://www.w3.org/Bugs/Public/show_bug.cgi?id=24867

如何在大多數孩子之后寫出選擇特定元素*的影子dom？

問題描述

2 個解決方案

解決方案1
2 2014-02-28 14:46:01

解決方案2
2 已采納 2014-02-28 19:46:49

如何在大多數孩子之后寫出選擇特定元素*的影子dom？

問題描述

2 個解決方案

解決方案1 2 2014-02-28 14:46:01

解決方案2 2 已采納 2014-02-28 19:46:49

解決方案1
2 2014-02-28 14:46:01

解決方案2
2 已采納 2014-02-28 19:46:49