Question

我有一个自定义元素x-element。当我使用这个元素时，如果它是它的父元素中的第一个，我希望内部元素上的margin-top为0，并且以下所有内容应改为1 em。（仅仅是例子）。

我希望元素本身能够处理这个问题，因此我不要必须在我使用此元素的每个页面上添加额外的css。

我目前使用的解决方案是这样的：

<style>
  x-element
  {
    --x-element-margin-top-opened: 1em;
  }
  :host x-element:first-of-type
  {
    --x-element-margin-top-opened: 0;
  }
</style>

这与css本身不可靠，因为：

https://www.polymer-project.org/1.0/docs/devguide/styling.html#style-api Polymer的自定义属性填充程序在元素创建时评估并应用自定义属性值一次。

创建子项的顺序不可靠（最后可以创建最后等）这意味着当所有子节点都被加载时，我还在父节点上添加了updateStyles代码。

为了重新评估自定义属性/../调用updateStyles 关于元素的方法。

因此，我希望所有与此相关的内容都封装并在元素本身中进行处理，而不是让每个父母都有大量重复的代码。

我找到的文档（https://www.polymer-project.org/1.0/docs/devguide/registering-elements.html#initialization-timing-for-siblings）说明如下：

无法保证初始化时间   兄弟元素。

这意味着兄弟姐妹可以按任何顺序准备好。

要在元素初始化时访问兄弟元素，您可以   从附加的回调中调用异步：
attached: function() {
  this.async(function() {
    // access sibling or parent elements here
  });
}

我试过了：

attached: function() {
    var self = this;

    this.async(function() {
      var c = self.parentNode.children;
      for (var i = 0; i < c.length; i++) {
        if (c[i].nodeName === 'X-ELEMENT') {
          if(c[i] === self) {
            console.log("isFirst", i, c[i]);
          }
          break;
        }
      }
     });
}

但是在所有兄弟姐妹实际出现之前它仍然会触发，这意味着我得到了标记为第一个的错误元素。

我想我想要的是将一个监听器附加到父级，该监听器会获得一个原生事件，该事件在所有子级加载时触发，是否有类似这样的内容或任何其他解决方案＃39; t必须向父母添加内容吗？

检查Polymer元素是否是父类

0 个答案: