Menu
Say I wrote a custom gravatar directive in AngularJS that is bound to an email property on the scope. The directive would replace this HTML …
<gravatar email="user.email" />
by a common img tag whose src attribute is set to the correct Gravatar url:
<img src="http://gravatar.com/avatar/..." />
My question might be a little broad or even naïve, but "how bad" is it to initially have the <gravatar /> tag in my page's HTML? Are there any "real-world" consequences besides not passing W3C validation?
703
Custom directives are used in AngularJS to extend the functionality of HTML. Custom directives are defined using "directive" function. A custom directive simply replaces the element for which it is activated.
Note: When you create a directive, it is restricted to attribute and elements only by default. In order to create directives that are triggered by class name, you need to use the restrict option. The restrict option is typically set to: 'A' - only matches attribute name.
AngularJS allows you to create custom directives with which it becomes easier to encapsulate and simplify DOM manipulation in AngularJS. These directives extend the HTML functionality.
AngularJS directives are extended HTML attributes with the prefix ng- . The ng-app directive initializes an AngularJS application. The ng-init directive initializes application data. The ng-model directive binds the value of HTML controls (input, select, textarea) to application data.
The W3C says
Authors must not use elements, attributes, or attribute values for purposes other than their appropriate intended semantic purpose, as doing so prevents software from correctly processing the page.
and
Authors must not use elements, attributes, or attribute values that are not permitted by this specification or other applicable specifications, as doing so makes it significantly harder for the language to be extended in the future.
http://www.w3.org/html/wg/drafts/html/master/dom.html#elements
Custom elements/attributes have no semantic value and should be avoided for these reasons.
There probably won't be any direct consequences that you will even notice. After all, Angular itself uses the non-confirming ng attributes (although they do support with the data- prefix as well).
The only possible problem you may face is if the element you introduce that is currently a custom element becomes part of the spec and has different behavior than what you were expecting before, but I think that is highly unlikely. Even so, I would avoid using anything custom if I could.
Eventually you will be able to register your own custom elements, but from what I can tell no browser supports this spec yet.
93
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
