Web-components like AngularJS directives

rrijnberk commented 9 years ago

Hello everyone,

i was ensure about the way to go about this but I've written a blog post on implementing shadow dom with AngularJS directive. Effectively making them act as a web component.

I would also like to submit this here as i feel it fits in well.

Greetings, Richard

rrijnberk commented 9 years ago

@zenorocha Could you please add a needs review label to this PR.

zenorocha commented 9 years ago

@PascalPrecht, our Angular guy, could you review this? Is it valuable for WebComponents.org?

0x-r4bbit commented 9 years ago

@zenorocha yes, will read it tomorrow and update this thread accordingly.

rrijnberk commented 9 years ago

True, but it is possible to isolate functionality inside directives. And as for HTML imports it really doesn't need them. Angular has templates which can be used to inject markup.

So maybe i should reference isolate functionality rather then scripts. And elaborate more on using templates as markup injection?

rrijnberk commented 9 years ago

No, it wraps the template and adds a transcluding div. This transcluding div will be the shadow root.

0x-r4bbit commented 9 years ago

So I read the article and while I think that it's kinda cool you made it work like this, I don't think we should add it to the articles on webcomponents.org. There are a couple of reasons why:

Your service requires the <template> to be inside that element, so you end up with your transcluded dom and the template next to it, inside your element. Which is not a deal breaker but actually not what you want.
It creates a div with an ng-transclude directive, that has a shadow root where content is projected. Doesn't feel very right to me, the ng-transclude shouldn't be there.
Your application code (especially directives) depend on ShadowService that creates the stuff mentioned above

Webcomponents.org is a place where we want to collect useful resources and best practices. I think it's interesting to see how you can use web component technologies in the angular of today with a bit of abstraction, but I don't think we should make people use it like this. All in all it's very hacky.

However, what we can do is share this post in our twitter channel. But I think @rrijnberk you should make clear in the article, that this is definitely not the way to go.

rrijnberk commented 9 years ago

While i agree this is not a very formal way to go. And it's far from ideal i believe as a case study it has merit. And as such i will leave it as is.

Let's close this pull request.

webcomponents / webcomponents.github.io

Web-components like AngularJS directives #177