在聚合物中构建自注入元素的最佳方法是什么?

What is the best way to build self-injecting elements in polymer?

本文关键字：最佳 方法 是什么 元素 注入 聚合物 构建      更新时间：2023-09-26

我试图找出如何最好地构建元素注入自己到其他元素的模板，而不需要改变其他元素模板代码。例子:

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

这是来自聚合物项目的标准代码支架示例。我想在div #content元素后面的<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>

这里唯一棘手的问题是如何找到要注入的位置。(例如，你是否假设页面上只有一个核心支架，或者注入元素应该找到最近的一个，等等)。这大部分取决于您和您的用例。您唯一需要知道的是如何查询影子dom。本文将介绍您可能需要的::shadow和/deep/选择器。

相关文章：