如何使用Enter键在阴影树中单击搜索按钮

Question

我了解了Shadow DOM。我想用它做一些自定义的想法。 因此，它称为使用Shadow DOM中的Enter键单击。

这是sarch Web组件的代码

The formatter threw an exception while trying to deserialize ...

麻烦出在

    connectedCallback() {
        this.render();
    }

    constructor() {
        super();
        this._shadowRoot = this.attachShadow({mode:"open"});
    }

    set clickEvent(event) {
        this._shadowRoot._clickEvent = event;
        this.render();
    }

    get value() {
        return this._shadowRoot.querySelector("#searchElement").value;
    }

    render() {
        this._shadowRoot.innerHTML = `
        <style>
        .search-container {
            max-width: 800px;
            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
            padding: 16px;
            border-radius: 5px;
            display: flex;
            position: sticky;
            top: 10px;
            background-color: white;
        }

        .search-container > input {
            width: 75%;
            padding: 16px;
            border: 0;
            border-bottom: 1px solid cornflowerblue;
            font-weight: bold;
        }

        .search-container > input:focus {
            outline: 0;
            border-bottom: 2px solid cornflowerblue;
        }

        .search-container > input:focus::placeholder {
            font-weight: bold;
        }

        .search-container >  input::placeholder {
            color: cornflowerblue;
            font-weight: normal;
        }

        .search-container > button {
            width: 23%;
            cursor: pointer;
            margin-left: auto;
            padding: 16px;
            background-color: cornflowerblue;
            color: white;
            border: 0;
            text-transform: uppercase;
        }

        @media screen and (max-width: 550px){
            .search-container {
                flex-direction: column;
                position: static;
            }

            .search-container > input {
                width: 100%;
                margin-bottom: 12px;
            }

            .search-container > button {
                width: 100%;
            }
        }
        </style>
            <div id="search-container" class="search-container">
                <input placeholder="Search football club" id="searchElement" type="search" autofocus>
                <button id="searchButtonElement" type="submit" onclick="javascript: alert("wow")">Search</button>
            </div>
            <script>

            </script>
        `;
        this._shadowRoot.querySelector("#searchButtonElement").addEventListener("click", this._shadowRoot._clickEvent);

        // Get the input field
        this._shadowRoot.querySelector("#searchElement").addEventListener("keyup", function(event) {
            if (event.keyCode === 13) {
                console.log("makan");
                // Cancel the default action, if needed
                event.preventDefault();
                // Trigger the button element with a click
                document.getElementById("searchButtonElement").click();
            }
        });
    }
}

customElements.define("search-container", SearchContainer);

我无法使用Enter键提交搜索表单。我不知道为什么，但是控制台日志中写道：

search-container.js：101未捕获的TypeError：无法读取null的属性“ click” 在HTMLInputElement.eval（search-container.js：101） 评估@ search-container.js：101

有人知道吗？请与我和其他人分享。