Dom 聚合物2-每次通过铁页/铁选择器显示元素时执行操作

我正在尝试创建一个注销页面，即使该元素被附加到DOM上一次，该页面仍能正常工作。当您获得一个登录名，然后注销，然后再次登录，并尝试重新注销时，就会发生这种情况

例如，shell具有

<iron-selector selected="[[page]]" attr-for-selected="name">
  <a name="logout" href="[[rootPath]]logout">
    <paper-icon-button icon="my-icons:sign-out" title="Logout" hidden$="[[!loggedIn]]"></paper-icon-button>
  </a>
  <a name="login" href="[[rootPath]]login">
    <paper-icon-button icon="my-icons:sign-in" title="Login" hidden$="[[loggedIn]]"></paper-icon-button>
  </a>
</iron-selector>

<<SNIP>>

<iron-pages selected="[[page]]" attr-for-selected="name" fallback-selection="view404" role="main">
  <my-search name="search"></my-search>
  <my-login name="login"></my-login>
  <my-logout name="logout"></my-logout>
  <my-view404 name="view404"></my-view404>
</iron-pages>

当我点击图标注销时，它会很好地附加

my logout

元素，并执行

ready（）

或

connectedCallback（）中的操作

my logout

ready() {
  super.ready();
  this._performLogout();
}

当您重新登录并尝试第二次注销而不刷新浏览器并导致DOM刷新时，就会出现问题。由于DOM从未被清除，
my logout
仍被附加，因此
ready（）
和
connectedCallback（）
都不会触发

我已经想出了解决这个问题的办法，但感觉很困难。基本上，我可以向元素添加一个事件侦听器，该元素将执行
this.\u performLogout（）选择图标时：

ready() {
  super.ready();
  this._performLogout();

  document.addEventListener('iron-select', (event) => {
    if (event.detail.item === this) {
      this._performLogout();
    }
  });
}

正如我所说，它是有效的，但我不喜欢有一个全局事件侦听器，而且我必须在元素第一次连接时调用注销函数，并且我必须侦听，因为侦听器直到元素第一次连接后才处于活动状态。
似乎没有一个“一刀切”的解决方案。核心问题是，“你想让父母告诉孩子，还是让孩子听父母的？”。我在问题中提出的“答案”在您想要聆听父元素时有效，但由于我不喜欢全局事件侦听器的想法，下面介绍如何使用
告诉子元素它已被选中进行查看

我们将
所选属性
属性添加到
：

<iron-pages selected="[[page]]" attr-for-selected="name" selected-attribute="selected" fallback-selection="view404" role="main">
  <my-search name="search"></my-search>
  <my-login name="login"></my-login>
  <my-logout name="logout"></my-logout>
  <my-view404 name="view404"></my-view404>
</iron-pages>

它将在内部将
设置为所选元素并显示它。
selected attribute=“selected”
所做的是在子元素上设置一个属性。如果您在浏览器JS控制台中查看，您将看到元素现在看起来像

<my-login name="login"></my-logout>
<my-logout name="login" class="iron-selected" selected></my-logout>

if
语句是这样的：我们只在显示时触发逻辑，而不是在离开时触发逻辑。这一点的一个好处是，我们不在乎元素是否已经附加到DOM上。当
/
第一次选择
时，属性被设置，元素被附加，观察者触发，观察者看到
选择的
现在是
真的
（与定义的
假的
相反）并运行逻辑。
将注销链接和登录链接放在一个
铁选择器中时会发生什么？使用两个
铁选择器有什么意义呢？@Ofisora也能工作。我只是没有清理过像那样的副本。不幸的是，它无助于解决如何在每次显示元素时最佳地激发方法的问题。
<iron-selector selected="[[page]]" attr-for-selected="name">
  <a name="logout" href="[[rootPath]]logout"><paper-icon-button icon="my-icons:sign-out" title="Logout" hidden$="[[!loggedIn]]"></paper-icon-button></a>
</iron-selector>

<my-login name="login"></my-logout>
<my-logout name="login" class="iron-selected" selected></my-logout>

static get properties() {
  return {
    // Other properties
    selected: {
      type: Boolean,
      value: false,
      observer: '_selectedChanged',
    },
  };
}

_selectedChanged(selected) {
  if (selected) {
    this._performLogout();
  }
}