javascript - 在 polymer 中构建自注入(inject)元件的最佳方法是什么？

Question

我试图弄清楚如何最好地构建将自身注入(inject)到其他元素的模板中的元素，而不需要更改其他元素的模板代码。示例:

<core-scaffold>
  <core-header-panel navigation="" flex="">
    <core-toolbar id="navheader">
      <span>Menu</span>
    </core-toolbar>
    <core-menu>
      <core-item label="One" horizontal="" center="" layout="" class=""></core-item>
      <core-item label="Two" horizontal="" center="" layout="" class="core-selected" active=""></core-item>
    </core-menu>
  </core-header-panel>

  <span tool="">Title</span>

  <div id="content"><p>If drawer is hidden, press button to display drawer.</p></div>
</core-scaffold>

这是 polymer 项目中的标准代码支架示例。我想将 polymer 元素添加到<core-scaffold>中div #content 背后的模板只需导入该元素即可。我不想根本不想改变现有的元素代码，新元素需要将自身注入(inject)到正确的位置。

实现这一目标的最佳方法是什么？

Answer 1

在定义将自身注入(inject)的元素时，为其提供一个附加函数，用于搜索预期位置并将其自身移动到那里。

简单示例(running demo):

<style>
  #content {
    background-color: rgb(226, 226, 252);
  }
</style>
<div id="content">

</div>

<polymer-element name="self-injector">
  <template>I'm the self-injector!</template>
  <script>
    Polymer('self-injector', {
      attached: function() {
        document.querySelector('#content').appendChild(this);
      }
    })
  </script>
</polymer-element>

<self-injector></self-injector> 

这里唯一的粘性 wicket 是如何找到你想要注入(inject)的位置。 (例如，您是否假设页面上只有一个核心支架，或者注入(inject)元素是否应该找到最近的一个，等等)。大部分取决于您和您的用例。您唯一需要知道的是如何查询 Shadow dom。 This article浏览您可能需要的选择器，::shadow 和 /deep/。