Polymer 聚合物2.0：请解释观察者方法在该代码中是如何工作的？

这是代码片段，但我无法理解observer方法是如何工作的

 static get properties() {
  return {
    selected: {
      type: Object,
      observer: '_selectedChanged'
    }
  };
}

_selectedChanged(selected, oldSelected) {
  if (oldSelected) oldSelected.removeAttribute('selected');
  if (selected) selected.setAttribute('selected', '');
}

connectedCallback() {
  super.connectedCallback();

  this.selected = this.firstElementChild;
}

完整代码：

什么是selected和oldselected？我们如何执行oldselected.RemoveAttribute？ 这些是元素的对象吗？

---

请详细说明

所选

是元素的属性。它的值是一些HTML元素（在本例中，我认为它总是img），因此，在

selected

属性中，总会在HTML的某个地方保存对

img

的引用。当此属性更改时，将使用两个参数调用函数

\u selectedChanged

。第一个参数是当前保存在选定的

中的新图像

，第二个参数是旧图像（选定的

的上一个值

）

在本教程的后面，您可以看到代码

  const elem = this.selected.nextElementSibling;
  if (elem) {
    this.selected = elem;
  }

其中显示

constelem

获取一些html元素并将其放入

this.selected

所以在函数

\u selectedChanged

中，他们从以前选择的旧图像中删除了html属性（因此它在屏幕上可见），并将新的html属性添加到新图像中，该图像现在应该在屏幕上可见

您可以想象，选择了属性

的
img
是当时屏幕上唯一显示的属性

我希望你能理解我的解释。我的英语不是100%，所以如果你有问题，问我，我可以试着解释更多

编辑

绑定和观察者的一些示例：

假设我们有一些
纸质输入
，它应该根据输入值显示一些结果（例如文章）。我们有一些HTML：

<paper-input value="{{search}}" label="Find articles"></paper-input>

解释：我们定义了属性
搜索
和
文章
。每当属性搜索发生更改时，它都会调用函数
\u findResults
（因为observer）。函数\u findResult只做一件事
this.set（“articles”）
几乎与
this.articles=
相同。有关这方面的更多信息，请参阅。所以
this.set（“articles”，“firstArticle”，“secondArticle”，Math.random（））
表示它创建数组并将其设置为
项目
属性。现在，当用户每次在
纸质输入中输入一些值时，我们都会更改一些数组，我们可以添加一些HTML来显示这些文章：

<template is="dom-repeat" items="{{articles}}" as="item">
  [[item]] <br>
</template>


[[项目]]


我也做了小提琴，所以你可以玩它，并了解它多一点。

您在开始时的问题几乎相同，不同之处在于它们存储在对HTML对象的某些属性引用中，而不仅仅是字符串。这也是关于了解javascript而不是polymer的一些基础知识的问题
请您编写一段代码，在按下按钮时更改某个div的文本值或其他内容，以演示观察者的功能。如果你能做到这一点，我会非常感激的，伙计！我真的欠你一个人情！（对迟来的答复表示歉意）
<template is="dom-repeat" items="{{articles}}" as="item">
  [[item]] <br>
</template>