自定义元素 getter/setter 在模块内部时不起作用

Question

我的自定义元素有问题，我无法使 getter 和 setter 在模块内工作。

<head>
    <script type="module">
        class Foo extends HTMLElement {
            get prop() {
                alert('get called')
                return 'somevalue'
            }

            set prop(value) {
                alert('set called');
                this._prop = value;
            }
        }
        customElements.define('foo-elem', Foo);
    </script>
</head>
<body>
    <foo-elem></foo-elem>
    <script>
        let foo = document.querySelector('foo-elem');
        foo.prop = 2; // <- this does not trigger the setter
    </script>
</body>

当我从脚本中删除 type="module" 时，一切正常。有没有一种方法可以导入（es6 导入），这样我就可以在单独的文件中声明每个组件？

Answer 1

这是一个与您的脚本加载顺序相关的问题。

带有 type=module 的脚本默认为 defer - 这意味着它们仅在文档完成解析时执行。

您的其他普通 script 标记不是 defer，因此它会在遇到它时执行 - 因此它会在您定义自定义元素及其 getters/setters 之前首先执行。一旦浏览器到达文档末尾，module 脚本就会在之后执行。

defer 脚本会按照它们出现的顺序执行。因此，如果您制作第二个脚本 defer - 通过添加 defer 属性，或将其设为 type="module"，那么 getters/setters 将按预期工作。

自定义元素 getter/setter 在模块内部时不起作用

Custom Element getter/setter not working when inside module

javascript

import

web-component

ecmascript-6