Пользовательский элемент get / setter не работает, когда внутри модуля - PullRequest
Новая
       10

Пользовательский элемент get / setter не работает, когда внутри модуля

0 голосов
/ 17 апреля 2020

У меня проблема с моим пользовательским элементом, из-за которого я не могу заставить работать 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) таким образом, чтобы я объявлял все компоненты в отдельных файлах?

1 Ответ

0 голосов
/ 30 апреля 2020

Эта проблема связана с последовательностью загрузки ваших сценариев.

Скрипты с type=module по умолчанию defer - это означает, что они выполняются только после завершения анализа документа.

Ваш другой простой тег script не defer, поэтому он выполняется при его обнаружении - поэтому он выполняется первым, прежде чем вы определили свой пользовательский элемент и его методы получения / установки. Сценарий module выполняется после того, как браузер добрался до конца документа. Однако сценарии

defer выполняются в порядке их появления. Поэтому, если вы создадите второй скрипт defer - либо добавив атрибут defer, либо сделав его type="module", тогда получатели / установщики будут работать как положено.

...