Web组件如何为其子项设置值？

Question

我试图创建一个Web组件。 该组件刚刚取得了进展。 以下是我的代码。

 class MyElement extends HTMLElement { static get observedAttributes() { return ['value']; } get value() { return this.hasAttribute('value'); } set value(val) { if(val) { this.setAttribute('value', val); } else { this.removeAttribute('value') } setValue(val); } constructor() { super(); let shadowRoot = this.attachShadow({mode: 'open'}); const t = document.querySelector('#my-element'); const instance = t.content.cloneNode(true); shadowRoot.appendChild(instance); this.shadowDOM = shadowRoot; } attributeChangedCallback(name, oldValue, newValue) { if (this.value) { this.setValue(newValue); } } // Set a value to progress setValue(val) { // How to do? } } customElements.define('my-element', MyElement);

 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>index</title> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <div> <my-element value=50></my-element> </div> <button onclick="test()" style="bottom: 10px; right: 10px; position: absolute;">test</button> <script> function test() { // How to set the value to my-element? } </script> <!--My Element--> <template id="my-element"> <style> :host { position: relative; display: block; width: 600px; } progress { -webkit-appearance: none; -moz-appearance: none; } progress::-moz-progress-bar { background: gainsboro; width: 300px; height: 500px; } progress::-moz-progress-value { background: green; } progress::-webkit-progress-bar { background: gainsboro; width: 300px; height: 500px; } progress::-webkit-progress-value { background: green; } </style> <progress value=20 max=100> </progress> </template> </body> </html>

我想通过my-element的值来控制进度值。

我在my-element(<my-element value=50></my-element>)设置了一个值，但是它不起作用，而且我不知道如何通过js设置值。

我猜问题出在我的MyElement类中是setValue(val) ，但我不知道如何实现它。

有人可以帮我吗？ 谢谢！

Answer 1

我会说您只需要使用DOM并检索您的progress元素。

 class MyElement extends HTMLElement { static get observedAttributes() { return ['value']; } get value() { return this.hasAttribute('value'); } set value(val) { if(val) { this.setAttribute('value', val); } else { this.removeAttribute('value') } } constructor() { super(); let shadowRoot = this.attachShadow({mode: 'open'}); const t = document.querySelector('#my-element'); const instance = t.content.cloneNode(true); shadowRoot.appendChild(instance); this.shadowDOM = shadowRoot; } attributeChangedCallback(name, oldValue, newValue) { if (this.value) { this.setValue(newValue); } } // Set a value to progress setValue(val) { const progress = this.shadowDOM.lastElementChild; progress.value = val; } } customElements.define('my-element', MyElement);

 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>index</title> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <div> <my-element id="myElement" value=50></my-element> </div> <button onclick="test()" style="bottom: 10px; right: 10px; position: absolute;">test</button> <script> function test() { document.getElementById("myElement").value = 5; } </script> <!--My Element--> <template id="my-element"> <style> :host { position: relative; display: block; width: 600px; } progress { -webkit-appearance: none; -moz-appearance: none; } progress::-moz-progress-bar { background: gainsboro; width: 300px; height: 500px; } progress::-moz-progress-value { background: green; } progress::-webkit-progress-bar { background: gainsboro; width: 300px; height: 500px; } progress::-webkit-progress-value { background: green; } </style> <progress value=20 max=100> </progress> </template> </body> </html>

Web组件如何为其子项设置值？

问题描述

1 个解决方案

解决方案1
2 已采纳 2018-05-01 09:01:49

Web组件如何为其子项设置值？

问题描述

1 个解决方案

解决方案1 2 已采纳 2018-05-01 09:01:49

解决方案1
2 已采纳 2018-05-01 09:01:49