Javascript 未捕获的TypeError:无法使用自定义元素设置null的属性“value”_Javascript_Html_Web Component

Javascript 未捕获的TypeError:无法使用自定义元素设置null的属性“value”

javascript html

Javascript 未捕获的TypeError:无法使用自定义元素设置null的属性“value”,javascript,html,web-component,Javascript,Html,Web Component,我创建了一个web组件，并给了它一个方法。。当按下按钮时，我希望该方法显示Hello，但它根本不起作用，我得到以下错误：未捕获的TypeError:无法将属性“值”设置为null 我想知道为什么会发生这种情况，以及如何解决我的JS代码： var WC = Object.create(HTMLElement.prototype); WC.hi= function() { document.getElementById("w-c").value = "Hello!"; }; var

我创建了一个web组件，并给了它一个方法。。当按下按钮时，我希望该方法显示Hello，但它根本不起作用，我得到以下错误：

未捕获的TypeError:无法将属性“值”设置为null

我想知道为什么会发生这种情况，以及如何解决

我的JS代码：

var WC = Object.create(HTMLElement.prototype);

WC.hi= function() {
    document.getElementById("w-c").value = "Hello!";
};

var WCR = document.registerElement("w-c", {
    prototype: WC, 
    extends:'input'
});

var wc = new WCR();

var division = document.getElementById('sh');
var root = division.createShadowRoot();
root.appendChild(wc);

WC.setDimensions = function() {
    Object.defineProperty(WC, 'height', {value: 1000});
};

我的HTML：

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
            <h2>WEB COMPONENT</h2>
                <div id="sh"> </div>
        <script src="webcomponent.js"> </script>
            <button onclick="wc.hi()">
                    Say hi</button>
    </body>
</html>

id为w-c的元素不存在。创建它，或者使用document.createElement

编辑：

没有id为w-c的元素。请添加button@the4kman如何访问自定义输入元素？我以为它的id是w-c，因为我注册了that@RajendranNadar我想更改自定义输入元素的值，而不是按钮确保在调用函数之前调用registerElement当我使用document.createElement时，自定义元素不显示，如何解决此问题？var newEl=document.createElementdiv/*在此处应用样式*/newEl.id=w-c；文件1.1.1.1.1；

var newEl = document.createElement("div");
/*apply styles here*/
newEl.id = "w-c";
document.appendChild(newEl);