时间戳

首页 > 解决方案 > 共享相同属性的父子 Web 组件

javascript - 共享相同属性的父子 Web 组件

问题描述

我正在尝试基于 Material Web Components mwc-textfield创建一个自定义文本字段 Web 组件：

import {LitElement, html, css} from 'lit-element';
import '@material/mwc-textfield';

export class CustomTextfield extends LitElement {

    static get properties() {
        return {
            label: {type: String},
            required: {type: Boolean},
            value: {type: String}
        }
    };

    get value_() {
        return this.shadowRoot.getElementById("input").value;
    };

    constructor() {
        super();
        this.label = "";
        this.value = "";
        this.required = false;
    }

    render() {
        return html`
            <mwc-textfield id="input"
                label="${this.label}"
                value="${(this.value === undefined) ? "" : this.value}"
                ?required="${this.required}"
                outlined
            >
            </mwc-textfield>
        `;
    };
}

customElements.define('custom-textfield', CustomTextfield);

此时，我可以通过custom-textfield value_属性获取 mwc-textfield value属性。有什么方法可以使用 custom-textfield value 属性获取 mwc- textfield value属性？

标签： javascriptweb-componentlit-elementlit-html

解决方案

为此，mwc-textfield 中的 value 属性应该反映其值，但这不是https://github.com/material-components/material-components-web-components/blob/master/packages/textfield中发生的情况/src/mwc-textfield-base.ts#L123

所以，目前不可能你正在寻找什么。

但无论如何，请检查这个问题，他们谈论可能的未来，即实现内部 api 以使用Form Associated Custom Elements来模仿表单元素

推荐阅读