3

我正在编写一个类似自定义<figure>的元素，我想<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>
4

2 回答 2

2

我在这里看到几个选项：

您可以使用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>
于 2014-02-28T14:46:01.330 回答
2

这实际上在 ShadowDOM polyfill 下确实有效，但有两个警告：

  1. : 不仅将简单的选择器作为参数，因此您需要执行类似的操作*:not(.caption)
  2. 如果您完全使用选择器，纯文本节点将被忽略，因此您必须将其他内容包装在某种元素中。

这是一个例子：

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

于 2014-02-28T19:46:49.660 回答