如何从Javascript初始化Web组件？

Question

假设我有以下网络组件:

<link rel="import" href="my-dialog.htm">

<my-dialog id='mydialog1' heading="A Dialog">Lorem ipsum</my-dialog>

有关详细信息,请参阅此处:http://cbateman.com/blog/a-no-nonsense-guide-to-web-components-part-1-the-specs/

在这里:http://www.revillweb.com/tutorials/web-component-tutorial/

但是,除了属性之外,有时我想用一些具有一堆属性的对象来初始化它,例如:

var obj = { heading: 'hello there', data1: 123, name: 'blabla' };
//^^ this can be any type of data.. think some kind of data model here, and maybe I get this model from the server.

所以我不能通过属性在我的html中发送上述对象,因为我可能有很多设置和/或我可能会在以后从服务器获取它,所以我需要在javascript中执行它.

所以我一直在做的是我刚刚在创建对象后接受它:

// initialize is a function I have inside my web component
$('#mydialog1').get(0).initialize(obj); 

^^这是有效的,初始化(..)是我的Web组件中的一个函数..但是:

问题#1我想知道这是否是初始化Web组件的正确方法,因为它看起来有点乱.

此外,如果在代码中实例化Web组件:

$('body').append("<my-dialog id='bla'></my-dialog>");
$('#bla').get(0).initialize(obj); 

问题#2我可以假设在第二行,用它的所有方法创建了'bla'吗？(有趣的是,这有效,但我想也许等待某种事件或组件准备就绪的事情会更好)

Answer 1

为什么要通过对象设置属性？我会进行设置，然后以这种方式传递它们：

document.getElementById("someID").style.width = widthVar; 
document.getElementById("someID").name = nameVar; 
document.getElementById("someID").style.color = colorVar;