访问聚合物中的 DOM答案

【问题标题】：access DOM in polymer访问聚合物中的 DOM
【发布时间】：2016-10-14 19:21:42
【问题描述】：

我想要达到的目标：

突出显示 p 元素中的一些文本
（不添加/或删除）值为 0 时的纸质徽章
根据数字更改纸质徽章颜色

示例模块：

<link rel="import" href="https://polygit2.appspot.com/components/polymer/polymer.html">
<link rel="import" href="https://polygit2.appspot.com/components/iron-icons/communication-icons.html">
<link rel="import" href="https://polygit2.appspot.com/components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="https://polygit2.appspot.com/components/paper-badge/paper-badge.html">

<dom-module id="question-one">
    <template>
        <template is="dom-repeat" items="{{numbers}}">
            <p>color one of my letters</p>
            <paper-icon-button id="someid{{index}}" icon="communication:email"></paper-icon-button>
            <paper-badge for="someid{{index}}" label="{{item}}"> </paper-badge>
        </template>
    </template>
    <script>
        Polymer({
            is: "question-one",
            properties: {
                numbers: {
                    type: Array,
                    value: function () {
                        return [0, 1, 2, 0, 4, 5, 0, 7, 8, 0]
                    }
                }
            }
        }); </script>
</dom-module>

及用法：

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://polygit2.appspot.com/components/webcomponentsjs/webcomponents-lite.js"></script>
    <link rel="import" href="questions//question-one.html" />
</head>
<body>
    <question-one></question-one>
</body>
</html>

【问题讨论】：

作为参考，这里记录了使用 DOM：polymer-project.org/1.0/docs/devguide/local-dom#dom-api

标签： dom module polymer

【解决方案1】：

添加id 属性

<p id="someId">

使用$ 映射来获取对元素的引用

this.$.someId.innerText...

this.$ 不适用于动态添加的 HTML 或 template is="dom-if" ortemplate is="dom-repeat" 或类似内容中的 HTML。

对于这种情况，您可以使用支持所有 CSS 选择器的this.$$(selector)，而this.$... 仅支持id（不支持#）

【讨论】：