5 lines
10 KiB
JSON
5 lines
10 KiB
JSON
{
|
|
"id": "guide/style-precedence",
|
|
"title": "Style Precedence",
|
|
"contents": "\n\n\n<div class=\"github-links\">\n <a href=\"https://github.com/angular/angular/edit/master/aio/content/guide/style-precedence.md?message=docs%3A%20describe%20your%20change...\" aria-label=\"Suggest Edits\" title=\"Suggest Edits\"><i class=\"material-icons\" aria-hidden=\"true\" role=\"img\">mode_edit</i></a>\n</div>\n\n\n<div class=\"content\">\n <h1 id=\"style-precedence\">Style Precedence<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/style-precedence#style-precedence\"><i class=\"material-icons\">link</i></a></h1>\n<p>When there are multiple bindings to the same class name or style attribute, Angular uses a set of precedence rules to determine which classes or styles to apply to the element.\nThese rules specify an order for which style and class related bindings have priority.\nThis styling precedence is as follows, from the most specific with the highest priority to least specific with the lowest priority:</p>\n<ol>\n<li>\n<p>Template bindings are the most specific because they apply to the element directly and exclusively, so they have the highest precedence.</p>\n<table width=\"100%\">\n <colgroup><col width=\"40%\">\n <col width=\"60%\">\n </colgroup><thead>\n <tr>\n <th>Binding type</th>\n <th>Example</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td>Property binding</td>\n <td><code><div [class.foo]=\"hasFoo\"></code><br><code><div [style.color]=\"color\"></code></td>\n </tr>\n <tr>\n <td>Map binding</td>\n <td><code><div [class]=\"classExpression\"></code><br><code><div [<a href=\"api/animations/style\" class=\"code-anchor\">style</a>]=\"styleExpression\"></code></td>\n </tr>\n <tr>\n <td>Static value</td>\n <td><code><div class=\"foo\"></code><br><code><div <a href=\"api/animations/style\" class=\"code-anchor\">style</a>=\"color: blue\"></code></td>\n </tr>\n </tbody>\n</table>\n</li>\n<li>\n<p>Directive host bindings are less specific because you can use directives in multiple locations, so they have a lower precedence than template bindings.</p>\n<table width=\"100%\">\n <colgroup><col width=\"40%\">\n <col width=\"60%\">\n </colgroup><thead>\n <tr>\n <th>Binding type</th>\n <th>Example</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td>Property binding</td>\n <td><code>host: {'[class.foo]': 'hasFoo'}</code><br><code>host: {'[style.color]': 'color'}</code></td>\n </tr>\n <tr>\n <td>Map binding</td>\n <td><code>host: {'[class]': 'classExpr'}</code><br><code>host: {'[<a href=\"api/animations/style\" class=\"code-anchor\">style</a>]': 'styleExpr'}</code></td>\n </tr>\n <tr>\n <td>Static value</td>\n <td><code>host: {'class': 'foo'}</code><br><code>host: {'<a href=\"api/animations/style\" class=\"code-anchor\">style</a>': 'color: blue'}</code></td>\n </tr>\n </tbody>\n</table>\n</li>\n<li>\n<p>Component host bindings have the lowest precedence.</p>\n <table width=\"100%\">\n <colgroup><col width=\"40%\">\n <col width=\"60%\">\n </colgroup><thead>\n <tr>\n <th>Binding type</th>\n <th>Example</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td>Property binding</td>\n <td><code>host: {'[class.foo]': 'hasFoo'}</code><br><code>host: {'[style.color]': 'color'}</code></td>\n </tr>\n <tr>\n <td>Map binding</td>\n <td><code>host: {'[class]': 'classExpression'}</code><br><code>host: {'[<a href=\"api/animations/style\" class=\"code-anchor\">style</a>]': 'styleExpression'}</code></td>\n </tr>\n <tr>\n <td>Static value</td>\n <td><code>host: {'class': 'foo'}</code><br><code>host: {'<a href=\"api/animations/style\" class=\"code-anchor\">style</a>': 'color: blue'}</code></td>\n </tr>\n </tbody>\n</table>\n</li>\n</ol>\n<h2 id=\"precedence-and-specificity\">Precedence and specificity<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/style-precedence#precedence-and-specificity\"><i class=\"material-icons\">link</i></a></h2>\n<p>In the following example, binding to a specific class, as in <code>[class.special]</code>, takes precedence over a generic <code>[class]</code> binding.\nSimilarly, binding to a specific style, as in <code>[style.color]</code>, takes precedence over a generic <code>[<a href=\"api/animations/style\" class=\"code-anchor\">style</a>]</code> binding.</p>\n<code-example path=\"attribute-binding/src/app/app.component.html\" region=\"basic-specificity\" header=\"src/app/app.component.html\">\n<h3>Basic specificity</h3>\n\n<!-- The `class.special` binding overrides any value for the `special` class in `classExpression`. -->\n<div [class.special]=\"isSpecial\" [class]=\"classExpression\">Some text.</div>\n\n<!-- The `style.color` binding overrides any value for the `color` property in `styleExpression`. -->\n<div [style.color]=\"color\" [<a href=\"api/animations/style\" class=\"code-anchor\">style</a>]=\"styleExpression\">Some text.</div>\n\n</code-example>\n<h2 id=\"precedence-and-bindings-from-different-sources\">Precedence and bindings from different sources<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/style-precedence#precedence-and-bindings-from-different-sources\"><i class=\"material-icons\">link</i></a></h2>\n<p>Specificity rules also apply to bindings even when they originate from different sources.\nAn element can have bindings that originate from its own template, from host bindings on matched directives, and from host bindings on matched components.</p>\n<code-example path=\"attribute-binding/src/app/app.component.html\" region=\"source-specificity\" header=\"src/app/app.component.html\">\n<h3>Source specificity</h3>\n\n<!-- The `class.special` template binding overrides any host binding to the `special` class set by `dirWithClassBinding` or `comp-with-host-binding`.-->\n<comp-with-host-binding [class.special]=\"isSpecial\" dirWithClassBinding>Some text.</comp-with-host-binding>\n\n<!-- The `style.color` template binding overrides any host binding to the `color` property set by `dirWithStyleBinding` or `comp-with-host-binding`. -->\n<comp-with-host-binding [style.color]=\"color\" dirWithStyleBinding>Some text.</comp-with-host-binding>\n\n</code-example>\n<h2 id=\"precedence-of-bindings-and-static-attributes\">Precedence of bindings and static attributes<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/style-precedence#precedence-of-bindings-and-static-attributes\"><i class=\"material-icons\">link</i></a></h2>\n<p>Bindings take precedence over static attributes because they are dynamic.\nIn the following case, <code>class</code> and <code>[class]</code> have similar specificity, but the <code>[class]</code> binding takes precedence.</p>\n<code-example path=\"attribute-binding/src/app/app.component.html\" region=\"dynamic-priority\" header=\"src/app/app.component.html\">\n<h3>Dynamic vs <a href=\"api/upgrade/static\" class=\"code-anchor\">static</a></h3>\n\n<!-- If `classExpression` has a value for the `special` class, this value overrides the `class=\"special\"` below -->\n<div class=\"special\" [class]=\"classExpression\">Some text.</div>\n\n<!-- If `styleExpression` has a value for the `color` property, this value overrides the `<a href=\"api/animations/style\" class=\"code-anchor\">style</a>=\"color: blue\"` below -->\n<div <a href=\"api/animations/style\" class=\"code-anchor\">style</a>=\"color: blue\" [<a href=\"api/animations/style\" class=\"code-anchor\">style</a>]=\"styleExpression\">Some text.</div>\n\n\n</code-example>\n<a id=\"styling-delegation\"></a>\n<h2 id=\"delegating-to-styles-with-lower-precedence\">Delegating to styles with lower precedence<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/style-precedence#delegating-to-styles-with-lower-precedence\"><i class=\"material-icons\">link</i></a></h2>\n<p>Higher precedence styles can defer to lower precedence styles using <code>undefined</code> values.\nFor example, consider the following template:</p>\n<code-example path=\"attribute-binding/src/app/app.component.html\" region=\"style-delegation\" header=\"src/app/app.component.html\">\n<comp-with-host-binding dirWithHostBinding></comp-with-host-binding>\n\n</code-example>\n<p>Imagine that the <code>dirWithHostBinding</code> directive and the <code>comp-with-host-binding</code> component both have a <code>[style.width]</code> host binding.</p>\n<code-example path=\"attribute-binding/src/app/comp-with-host-binding.component.ts\" region=\"hostbinding\" header=\"src/app/comp-with-host-binding.component.ts and dirWithHostBinding.directive.ts\">\n@<a href=\"api/core/HostBinding\" class=\"code-anchor\">HostBinding</a>('style.width')\nwidth = '200px';\n\n</code-example>\n<p>If <code>dirWithHostBinding</code> sets its binding to <code>undefined</code>, the <code>width</code> property falls back to the value of the <code>comp-with-host-binding</code> host binding.</p>\n<code-example header=\"dirWithHostBinding directive\">\n@<a href=\"api/core/HostBinding\" class=\"code-anchor\">HostBinding</a>('style.width')\nwidth = ''; // undefined\n</code-example>\n<div class=\"alert is-helpful\">\n<p> If <code>dirWithHostBinding</code> sets its binding to <code>null</code>, Angular removes the <code>width</code> property entirely.</p>\n <code-example header=\"dirWithHostBinding\">\n @<a href=\"api/core/HostBinding\" class=\"code-anchor\">HostBinding</a>('style.width')\n width = null;\n </code-example>\n</div>\n\n \n</div>\n\n<!-- links to this doc:\n - guide/attribute-binding\n-->\n<!-- links from this doc:\n - api/animations/style\n - api/core/HostBinding\n - api/upgrade/static\n - guide/style-precedence#delegating-to-styles-with-lower-precedence\n - guide/style-precedence#precedence-and-bindings-from-different-sources\n - guide/style-precedence#precedence-and-specificity\n - guide/style-precedence#precedence-of-bindings-and-static-attributes\n - guide/style-precedence#style-precedence\n - https://github.com/angular/angular/edit/master/aio/content/guide/style-precedence.md?message=docs%3A%20describe%20your%20change...\n-->"
|
|
} |