paper-dropdown-menu 在 lit-element 中不起作用

Question

Edit：事实证明，如果在另一个元素中使用它之前导入 paper-listbox 会有所帮助。出于某种原因，我认为它是作为对我是导入的另一个元素的依赖项导入的，但不是。一旦我添加了显式导入，它就开始正常工作。原始问题如下。

首先，只有在 lit-element 中使用 paper-dropdown-menu（其中包含 paper-listbox）时才会出现此问题。我们在多个 PolymerElement(s) 中以几乎完全相同的方式使用该组件，没有任何问题。

基本上，我发现 paper-dropdown-menu 有两个问题。首先是它从不显示任何类型的值，无论是 label 属性还是实际的 selected 值，它的 value 属性也不会改变，即使paper-listbox里面有一个设定值。第二个问题是似乎无法从下拉菜单中 select 任何值 - 您可以单击它们，但列表不会关闭，并且 selected 选项名称不会出现在菜单的文本显示中。

由于问题的性质，问题似乎是其中的 paper-dropdown-menu 和 paper-listbox 无法正常通信...但我会该死的，如果我能找出原因。

这是来自元素的 render 方法的相关标记：

<paper-dropdown-menu id="homepageSelect">
    <paper-listbox slot="dropdown-content" 
        attr-for-selected="item-value" 
        selected="${state.homepage}"
        label="Select a homepage"
        @selected-changed="_homepageChanged">

        ${state.homepageOptions.map(o => html`
            <paper-item item-value="${o.value}">${o.name}</paper-item>
        `)}

    </paper-listbox>
</paper-dropdown-menu>

我们使用的模拟数据：

{
    "title": "Boss of you",
    "fullName": "J Jonah Jameson",
    "username": "jjj",
    "client": "Daily Bugle",
    "homepage": "http://sampledomain.com/",
    "homepageOptions": [{
        "name": "FrontPage",
        "value": "http://sampledomain.com/"
    }, {
        "name": "Editorials",
        "value": "http://sampledomain.com/opinion"
    }, {
        "name": "Metro",
        "value": "http://sampledomain.com/metro"
    }],
    "groups": [{
        "name": "Admin",
        "description": "Administers the whole shebang"
    }, {
        "name": "Power users",
        "description": "Like regular users, but powerful"
    }, {
        "name": "Gen pop",
        "description": "Down in the weeds"
    }],
    "changePasswordUrl": "https://change.password.now",
    "email": "test@email.com",
    "phoneWork": "404-555-1234",
    "phoneCell": "404-555-4321",
    "phoneHome": "404-123-5555",
    "address": {
        "address1": "1234 Boulevard St",
        "address2": "Ste 1",
        "city": "Atlanta",
        "state": "GA",
        "zip": "30303",
        "country": "USA",
        "type": "Office"
    }
}

我会张贴其外观的屏幕截图，但想象一下没有任何 selected 的下拉菜单，您就明白了。单击它实际上会显示内部 paper-listbox，但列表不会在单击时关闭，单击的值也不会达到 paper-dropdown-menu 元素。

有人知道发生了什么事吗？从理论上讲，PolymerElement 应该能够运行在任何形式的 HTML 标记内——它在 lit-element 内的事实不应该有什么不同，也不会t 用于我们正在使用的所有其他组件。然而，这个组件，使用这种模式，在 PolymerElement 中工作，但在这里不工作，我不明白为什么。

Answer 1

It never displays a value of any type, whether the label attribute or an actual selected value, nor does its value property ever change, even when the paper-listbox inside has a set value

在您引用的模板内部 state。如果 state 是元素的属性那么你必须用 this. 引用它（除非它是你在 render() 函数的部分定义的变量你没有粘贴在这里）。这可能是缺失值的原因。

缺少标签是因为您将 label 属性放在 <paper-listbox> 中，而它应该放在 <paper-dropdown-menu>.

中

It appears to be impossible to select any value from the dropdown menu - you can click on them, but the list doesn't close, and the selected option name doesn't show up in the menu's text display.

没有出现的名字应该和上一点一样。我在本地尝试了您的示例，但由于动画错误，列表实际上没有关闭。发生这种情况是因为下拉菜单使用了一些必须填充的 Web 动画 API 功能：

$ npm install web-animations-js

<script src="node_modules/web-animations-js/web-animations-next-lite.min.js"></script>

此外，您将一个字符串传递给 @selected-changed (la Polymer)，而您应该使用插值：

@selected-change=${e => this. _homepageChanged(e)}

or

@selected-change=${this. _homepageChanged.bind(this)}

这样看来一切正常：

paper-dropdown-menu 在 lit-element 中不起作用

paper-dropdown-menu not working in a lit-element

html

javascript

polymer

custom-element

lit-element