Eu estou tentando passar o atributo de dados no elemento personalizado como um objeto, mas durante o recebimento do método attachedCallback, obtendo o valor "[objeto do objeto]" em um formato de string.

Alguém pode me ajudar a descobrir qual é a solução alternativa para obter os atributos como um objeto dentro do elemento personalizado (componente da web).

amostra de código

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

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

tag de elemento personalizado

<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>

Nota: suponha que<my-element> é um menu suspenso que oferece ao usuário a opção de escolher algum valor.

Solução: ainda não há solução nativa nas especificações de elementos personalizados (v0 ev1)

Como o Custom Elements não suporta ligação de dados, precisamos de uma camada de adição de açúcar (por exemplo, Polymer ou SkateJS), como mencionado por @tony no comentário.