Usage of in angular.dart components?

Question

The method mentioned in this answer: https://stackoverflow.com/a/19818178/194642 does not seem to work anymore. How does one use web component's element in angular.dart component?

@Component(
selector: "custom-elem",
template: "<div id='container-elem'> <content></content></div>")
class CustomElem extends ShadowRootAware{
  onShadowRoot(_) {
    //do something
  }
}

Now, I would expect the following html fragment:

<custom-elem> 
  <span>Sample content</span>
</custom-elem>

to result in following within #shadow-root:

<div id='container-elem'>
  <content> 
    <span>Sample content</span>
  </content>
</div>

Can you please post some code snippets that demonstrate what you want to do? — Günter Zöchbauer, Aug 01 '14 at 20:51

score 1 · Answer 1 · answered Aug 01 '14 at 21:05

I'm not sure if I understand your question or your expected result correctly but the <content> tag works the way that <span>Sample content</span> are children of <custom-elem> where <div id='container-elem'> is put in the Shadow DOM of <custom-elem> before the children and </div> in the Shadow DOM of <custom-elem> after the children but the <span> is in the light DOM like it would be when used like

<div> 
  <span>Sample content</span>
</div>

When you inspect the Shadow DOM of <custom-elem> there should just be the template part of your Angular component.

Usage of in angular.dart components?

1 Answers1