1

我试图创建一个 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设置值。

我猜问题出setValue(val)在我的MyElement课堂上，但我不知道如何实现它。

有人可以帮助我吗？谢谢！

4

1 回答 1

2

我想说你只需要使用 DOM 并检索你的进度元素。

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>

于 2018-05-01T09:01:49.450 回答