Polymer 2：点击按钮切换Overlay元素类名及跨元素数据绑定可行性咨询

当然没问题！在Polymer 2里，元素间的交互和数据绑定本来就是核心能力之一，刚好能完美解决你的需求。我给你一步步拆解实现方法，附上代码示例：

我们可以通过主元素作为状态管理者来实现：在主元素里定义一个布尔状态（比如isOverlayActive），点击按钮时触发事件让主元素切换这个状态，再把状态绑定到overlay元素上，根据状态切换它的类名。

1. 自定义切换按钮元素（my-toggle-button） #

这个按钮的作用是触发切换动作，我们让它点击时向外发送一个自定义事件，通知主元素改变状态：

<dom-module id="my-toggle-button">
  <template>
    <button on-click="_handleClick">切换Overlay</button>
  </template>
  <script>
    class MyToggleButton extends Polymer.Element {
      static get is() { return 'my-toggle-button'; }
      
      _handleClick() {
        // 触发自定义事件，允许穿透Shadow DOM被父元素监听
        this.dispatchEvent(new CustomEvent('toggle-overlay', {
          bubbles: true,
          composed: true
        }));
      }
    }
    customElements.define(MyToggleButton.is, MyToggleButton);
  </script>
</dom-module>

2. 自定义Overlay元素（my-overlay） #

这个元素需要接收一个状态属性，根据属性值切换类名来显示/隐藏。我们用Polymer的类绑定语法来实现：

<dom-module id="my-overlay">
  <template>
    <style>
      .overlay {
        display: none;
        position: fixed;
        top: 0; left: 0;
        width: 100%; height: 100%;
        background: rgba(0,0,0,0.5);
        align-items: center;
        justify-content: center;
      }
      .overlay.active {
        display: flex;
      }
      .content {
        background: white;
        padding: 2rem;
        border-radius: 4px;
      }
    </style>
    <!-- 根据isActive状态动态添加active类 -->
    <div class$="overlay {{isActive ? 'active' : ''}}">
      <div class="content">这是Overlay的内容区域</div>
    </div>
  </template>
  <script>
    class MyOverlay extends Polymer.Element {
      static get is() { return 'my-overlay'; }
      
      static get properties() {
        return {
          // 接收父元素传递的激活状态
          isActive: {
            type: Boolean,
            value: false
          }
        };
      }
    }
    customElements.define(MyOverlay.is, MyOverlay);
  </script>
</dom-module>

3. 主元素（main-app） #

主元素作为容器，引入上面两个自定义元素，管理核心状态，并完成事件监听和数据绑定：

<dom-module id="main-app">
  <template>
    <!-- 监听按钮的自定义事件，切换状态 -->
    <my-toggle-button on-toggle-overlay="_toggleOverlay"></my-toggle-button>
    <!-- 把状态绑定到overlay的isActive属性 -->
    <my-overlay is-active="{{isOverlayActive}}"></my-overlay>
  </template>
  <script>
    class MainApp extends Polymer.Element {
      static get is() { return 'main-app'; }
      
      static get properties() {
        return {
          // 管理Overlay的激活状态
          isOverlayActive: {
            type: Boolean,
            value: false
          }
        };
      }
      
      _toggleOverlay() {
        // 切换状态值
        this.isOverlayActive = !this.isOverlayActive;
      }
    }
    customElements.define(MainApp.is, MainApp);
  </script>
</dom-module>

如果你想让按钮也能感知状态（比如按钮文本随状态变化），可以给按钮添加状态属性，通过双向绑定实现数据共享：

修改按钮元素，添加属性和动态文本：

<dom-module id="my-toggle-button">
  <template>
    <!-- 根据isActive状态切换按钮文本 -->
    <button on-click="_handleClick">{{isActive ? '关闭Overlay' : '打开Overlay'}}</button>
  </template>
  <script>
    class MyToggleButton extends Polymer.Element {
      static get is() { return 'my-toggle-button'; }
      
      static get properties() {
        return {
          isActive: {
            type: Boolean,
            value: false,
            notify: true // 开启属性变化通知，支持双向绑定
          }
        };
      }
      
      _handleClick() {
        // 直接修改自身状态，通过双向绑定同步到父元素
        this.isActive = !this.isActive;
      }
    }
    customElements.define(MyToggleButton.is, MyToggleButton);
  </script>
</dom-module>

然后修改主元素的绑定，不需要再监听事件，直接通过双向绑定同步状态：

<dom-module id="main-app">
  <template>
    <!-- 双向绑定状态，按钮修改状态后自动同步到主元素 -->
    <my-toggle-button is-active="{{isOverlayActive}}"></my-toggle-button>
    <my-overlay is-active="{{isOverlayActive}}"></my-overlay>
  </template>
  <script>
    class MainApp extends Polymer.Element {
      static get is() { return 'main-app'; }
      
      static get properties() {
        return {
          isOverlayActive: {
            type: Boolean,
            value: false
          }
        };
      }
    }
    customElements.define(MainApp.is, MainApp);
  </script>
</dom-module>

这样就实现了元素间的数据共享绑定，按钮和overlay的状态会自动同步~

内容的提问来源于stack exchange，提问作者LuisBento