Javascript 在聚合物中构建自注入元件的最佳方法是什么？

我试图找出如何最好地构建将自己注入到其他元素的模板中的元素，而无需修改其他元素的模板代码。 例如：

菜单
标题
若抽屉隐藏，按按钮显示抽屉

这是聚合物项目中的标准规范脚手架示例。 我想在

div#content

元素后面的

模板中添加聚合元素，只需导入该元素即可。 我不想改变现有的元素代码，新元素需要在正确的位置注入自己

---

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

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

简单示例（）：

#内容{
背景色：rgb（226226252）；
}
我是自我注射者！
聚合物（“自注入式”{
附：函数（）{
document.querySelector（“#content”）.appendChild（this）；
}
})

这里唯一棘手的问题是如何找到要注入的位置。（例如，您是否假设页面上只有一个核心支架，或者注入元素是否应该找到最近的支架，等等）。这大部分取决于您和您的用例。您只需要知道如何查询阴影dom。浏览您可能需要的选择器，

：：shadow

和

/deep/

<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>

<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>