Let's say I have the following web-component:

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

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

```

See here for more info: <http://cbateman.com/blog/a-no-nonsense-guide-to-web-components-part-1-the-specs/>

and here: <http://www.revillweb.com/tutorials/web-component-tutorial/>

However, apart from attributes sometimes I'd like to initialize it with some object that has a bunch of properties for example:

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

```

So I can't send the above object within my html via attributes, cause I might have alot of settings and/or I might get it at a later point from the server, so I need to do it in javascript.

So what I've been doing is I've just been taking the object after it has been created:

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

```

^^ And this works, initialize(..) is a function inside my web component.. But:

**Question #1 I wonder if this is the correct way to initialize a web component, as it seems a bit messy.**

Also, if one instantiates a web-component in code:

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

```

**Question #2 Can I assume on the second line, that 'bla' has been created here with all its methods?** (funny enough, this works but I thought maybe it'd be better to wait for some kind of event or something that the component is ready)