Skip to content
Permalink
Browse files

fix($compileProvider): remove the ability to set the `restrict` optio…

…n on `component()` helper

Closes #13741
  • Loading branch information...
petebacondarwin committed Jan 11, 2016
1 parent 4e1b36c commit 25bc53180248bf5e8a6467c55d913cfa38fc7a3b
Showing with 8 additions and 10 deletions.
  1. +6 −7 src/ng/compile.js
  2. +2 −3 test/ng/compileSpec.js
@@ -968,21 +968,20 @@ function $CompileProvider($provide, $$sanitizeUriProvider) {
* See {@link ng.$compile#-bindtocontroller- `bindToController`}.
* - `transclude` – `{boolean=}` – whether {@link $compile#transclusion content transclusion} is enabled.
* Disabled by default.
* - `restrict` - `{string=}` - a string containing one or more characters from {@link ng.$compile#-restrict- EACM},
* which restricts the component to specific directive declaration style. If omitted, this defaults to 'E'.
* - `$canActivate` – `{function()=}` – TBD.
* - `$routeConfig` – `{object=}` – TBD.
*
* @returns {ng.$compileProvider} the compile provider itself, for chaining of function calls.
* @description
* Register a **Component definition** with the compiler. This is a shorthand for registering a special
* type of directive, which represents a self-contained UI component in your application.
* Register a **component definition** with the compiler. This is a shorthand for registering a special
* type of directive, which represents a self-contained UI component in your application. Such components
* are always isolated (i.e. `scope: {}`) and are always restricted to elements (i.e. `restrict: 'E'`).
*
* Component definitions are very simple and do not require much of the complexity behind defining general
* Component definitions are very simple and do not require as much configuration as defining general
* directives. Component definitions usually consist only of a template and a controller backing it.
*
* In order to make the definition easier, components enforce best practices like use of `controllerAs`,
* `bindToController`, **isolate scope** and default behaviors like restriction to elements.
* `bindToController`. They always have **isolate scope** and are restricted to elements.
*
* Here are a few examples of how you would usually define components:
*
@@ -1077,7 +1076,7 @@ function $CompileProvider($provide, $$sanitizeUriProvider) {
transclude: options.transclude,
scope: {},
bindToController: options.bindings || {},
restrict: options.restrict || 'E'
restrict: 'E'
};
}

@@ -9357,8 +9357,7 @@ describe('$compile', function() {
template: 'abc',
templateUrl: 'def.html',
transclude: true,
bindings: {abc: '='},
restrict: 'EA'
bindings: {abc: '='}
});
module('my');
inject(function(myComponentDirective) {
@@ -9370,7 +9369,7 @@ describe('$compile', function() {
transclude: true,
scope: {},
bindToController: {abc: '='},
restrict: 'EA'
restrict: 'E'
}));
});
});

8 comments on commit 25bc531

@AIMMOTH

This comment has been minimized.

Copy link

AIMMOTH replied Jan 19, 2016

Why is only element possible? It can change the DOM structure which could be important for SEO.

@petebacondarwin

This comment has been minimized.

Copy link
Member Author

petebacondarwin replied Jan 19, 2016

@AIMMOTH we feel that "component" directives are always elements. Can you explain how this impacts SEO in practice? Be aware that if you want a directive that is not an element then you are still free to use the mod.directive(...) helper

@AIMMOTH

This comment has been minimized.

Copy link

AIMMOTH replied Jan 25, 2016

@petebacondarwin Recommendations is that the DOM structure should be arranged for SEO. For instance <article></article> should be used. If this article is a component, it was possible to add the component as attribute <article component></article> but now you need to destroy DOM structure with <component></component>

Or have I missed something?

@AIMMOTH

This comment has been minimized.

Copy link

AIMMOTH replied Feb 4, 2016

Updated last comment.

There is some information in this blog http://www.icrossing.com/uk/ideas/html5s-new-semantic-tags-whats-seo-value

@gkalpak

This comment has been minimized.

Copy link
Member

gkalpak replied Feb 4, 2016

@AIMMOTH, I can't find any info or guideline suggesting that <article my-component>…</article> is any more SEO-friendly than <my-component><article>…</article></my-component>.
Do you have any insight on this ?

@AIMMOTH

This comment has been minimized.

Copy link

AIMMOTH replied Feb 5, 2016

Of course there are workarounds. And your solution is perfectly valid.

Here's a second blog http://www.gravitatedesign.com/blog/seo-benefits-of-html5-and-schema/

@gkalpak

This comment has been minimized.

Copy link
Member

gkalpak replied Feb 5, 2016

From what I've read, I don't understand that wrapping <article> in a <my-component> element hurts SEO.

AFAIK, the purpose of those semantic elements is to better convey the purpose of a part of the webpage. I don't think that having them wrapped in non-semantic elements (such as <my-component>) affects that.
(I might be wrong, though...)

IMO, <my-component><article /></my-component> isn't a workaround; <article my-component></article> on the other hand does look a bit "hacky". And with Web Components being a thing, I doubt that custom elements would be "frowned upon" by search engines.

And, of cource, one can always use plain ol' directives (with restrict: 'A') 😃

@AIMMOTH

This comment has been minimized.

Copy link

AIMMOTH replied Feb 8, 2016

Yeah. The best way migth be <article><my-component></my-component></article>

Please sign in to comment.
You can’t perform that action at this time.