Я пытаюсь передать атрибут данных в пользовательском элементе как объект, но при получении внутри метода attachCallback получаю значение «[объектный объект]» в виде строки.

Так может кто-нибудь помочь мне выяснить, как обходится получение атрибутов как объекта внутри custom-элемента (веб-компонента).

пример кода

<script>
class myElements extends HTMLElement {
    createdCallback() {
        this.innerHTML = `<h1>Hello</h1>`;
    }
    attachedCallback() {
        console.log(this.getAttribute('data'));
    }
}

 document.registerElement('my-element', myElements);
</script>

пользовательский тег элемента

<script>
    var object = { key1: 111, key2: 222, key3: function(){return "hi"}, key4:[1,2,3]};

   function changeHandler() {
    page('/default', function() {
        // some logic to decide which route to redirect to
        if (admin) {
            page.redirect('/admin');
        } else {
            page.redirect('/guest');
        }
    });
}

</script>

<my-element data="object" onchange="changeHandler"></my-element>

Примечание: предположим, что<my-element> это выпадающий список, который дает пользователю возможность выбрать какое-либо значение.

Решение: все еще нет собственного решения в спецификациях пользовательских элементов (v0 а такжеv1).

Поскольку пользовательские элементы не поддерживают привязку данных, поэтому для этого нам необходим слой подслащивания (например, Polymer или SkateJS), как упомянуто @tony в комментарии.