为什么自定义元素不支持将属性作为对象？

我试图将自定义元素中的数据属性作为对象传递，但在接收 AttachedCallback 方法内部时以字符串形式获取值“[object object]”。

那么任何人都可以帮助我弄清楚如何将属性作为自定义元素（Web 组件）中的对象获取。

代码示例

<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 and v1).

由于自定义元素不支持数据绑定，因此我们需要一个糖化层（例如，Polymer 或 SkateJS），正如@tony 在评论中提到的那样。

尝试将对象转换为 JSON 字符串，

var object = { key1: 111, key2: 222};
JSON.stringify(object);

然后当你想要获取值时，将其解析回对象

JSON.parse(this.getAttribute('data'));