@vaadin/vaadin-themable-mixin
Advanced tools
@vaadin/vaadin-themable-mixin - npm Package Compare versions
Comparing version 1.5.0-alpha1 to 1.5.0-alpha2
@@ -12,3 +12,3 @@ { | ||
| "name": "@vaadin/vaadin-themable-mixin", | ||
| "version": "1.5.0-alpha1", | ||
| "version": "1.5.0-alpha2", | ||
| "main": "vaadin-themable-mixin.js", | ||
@@ -21,3 +21,4 @@ "author": "Vaadin Ltd", | ||
| "files": [ | ||
| "vaadin-*.js" | ||
| "vaadin-*.js", | ||
| "register-styles.js" | ||
| ], | ||
@@ -24,0 +25,0 @@ "resolutions": { |
@@ -23,3 +23,3 @@ # Table of Contents | ||
| #### Example: Global stylesheet | ||
|  | ||
|  | ||
@@ -38,3 +38,3 @@ The only thing we can style using global styles is the whole `<vaadin-text-field>` element, but nothing inside it, like the *label* or the *input field*. | ||
|  | ||
|  | ||
@@ -51,3 +51,3 @@ ## Local Style Scope (Shadow DOM) | ||
|  | ||
|  | ||
@@ -67,3 +67,3 @@ Only the `<style>` element highlighted in the inspector can affect the elements inside the `<vaadin-text-field>` element’s shadow DOM. | ||
|  | ||
|  | ||
@@ -83,3 +83,3 @@ That is because there are no `<vaadin-text-field>` elements inside the shadow DOM. If we want the same result as with the global stylesheet, we need to use the `:host` selector to match the element which is the “host” for this shadow DOM or style scope: | ||
|  | ||
|  | ||
@@ -96,3 +96,3 @@ If we wanted to move the border to the actual text input element, we would need to inspect the shadow DOM hierarchy and see which selector would match that particular element. For `<vaadin-text-field>`, the correct selector would be `[part="input-field"]`: | ||
| ``` | ||
|  | ||
|  | ||
@@ -102,3 +102,3 @@ | ||
| *Read the documentation about [Styles Scopes](https://github.com/vaadin/vaadin-themable-mixin/wiki/1.-Style-Scopes) before continuing.* | ||
| *Read the documentation about [Style Scopes](#style-scopes) before continuing.* | ||
@@ -122,3 +122,3 @@ | ||
| > Note: for cross-browser compatibility, [use the `<custom-style>` element](https://www.polymer-project.org/2.0/docs/devguide/style-shadow-dom#custom-style). | ||
| > Note: for cross-browser compatibility, [use the `<custom-style>` element](https://polymer-library.polymer-project.org/2.0/docs/devguide/style-shadow-dom#custom-style). | ||
@@ -146,3 +146,3 @@ > Note: check the API documentation of each element for the custom properties they expose. See the [API documentation for vaadin-combo-box](https://vaadin.com/elements/vaadin-combo-box/html-api/elements/Vaadin.ComboBoxElement#styling) for example. | ||
| Custom elements extending [`ThemableMixin`](https://github.com/vaadin/vaadin-themable-mixin) allow you to inject styles into their local scope by defining new [style modules](https://www.polymer-project.org/2.0/docs/devguide/style-shadow-dom#style-modules) in the global scope. You specify the targeted element using the `theme-for` attribute. | ||
| Custom elements extending [`ThemableMixin`](https://github.com/vaadin/vaadin-themable-mixin) allow you to inject styles into their local scope by defining new [style modules](https://polymer-library.polymer-project.org/2.0/docs/devguide/style-shadow-dom#style-modules) in the global scope. You specify the targeted element using the `theme-for` attribute. | ||
@@ -172,3 +172,3 @@ ```html | ||
| When working with ES modules/JavaScript generally, constructing theme modules programmatically might end up producing boilterplace code to the application. Where possible, you should prefer the `registerStyles` utility which provides a convenient abstraction over the declarative API. | ||
| When working with ES modules/JavaScript generally, constructing theme modules programmatically might end up producing boilerplate code to the application. Where possible, you should prefer the `registerStyles` utility which provides a convenient abstraction over the declarative API. | ||
@@ -241,3 +241,3 @@ Importing the helper (as an HTMLImport) | ||
| *Read the documentation about [Styles Scopes](https://github.com/vaadin/vaadin-themable-mixin/wiki/1.-Style-Scopes) and [Adding Styles to Local Scope](https://github.com/vaadin/vaadin-themable-mixin/wiki/2.-Adding-Styles-to-Local-Scope) before continuing.* | ||
| *Read the documentation about [Style Scopes](#style-scopes) and [Adding Styles to Local Scope](#adding-styles-to-local-scope) before continuing.* | ||
@@ -260,3 +260,3 @@ | ||
| #### Example: stylable parts of vaadin-text-field | ||
|  | ||
|  | ||
@@ -388,6 +388,6 @@ You can expect these part names to remain constant and rely on the hierarchy of these parts (i.e. the `value` part will always be contained within `input-field`). | ||
| 1. **Expose new custom properties** | ||
| 1. **Expose new custom properties** | ||
| This is the recommended first option for simple situations. If you end up exposing more than a handful of properties, you should consider the second option. | ||
| 2. **Use scoping selectors** | ||
| This approach is used by the built-in variations in Vaadin themes (Valo and Material), i.e. `theme` attribute. The downside of this approach is that you end up adding the selectors and properties to all instances, even though only some instances will need those styles (they won’t apply unless the scoping selector is used on the host element). | ||
| 2. **Use scoping selectors** | ||
| This approach is used by the built-in variations in Vaadin themes (Lumo and Material), i.e. `theme` attribute. The downside of this approach is that you end up adding the selectors and properties to all instances, even though only some instances will need those styles (they won’t apply unless the scoping selector is used on the host element). | ||
@@ -433,3 +433,2 @@ #### Example: expose new custom properties | ||
| border-radius: 9px; | ||
| ... | ||
| } | ||
@@ -446,4 +445,28 @@ </style> | ||
| You can also use a `theme` attribute as a scoping selector for your style overrides, as shown in the example below. | ||
| #### Example: scoping with `theme` attribute selector | ||
| ```html | ||
| <!-- Define the theme module (in index.html or in a separate HTML import) --> | ||
| <dom-module id="special-field-theme" theme-for="vaadin-text-field"> | ||
| <template> | ||
| <style> | ||
| :host([theme~="special-field"]) [part="input-field"] { | ||
| background-color: #000; | ||
| color: #fff; | ||
| border: 2px solid #fff; | ||
| border-radius: 9px; | ||
| } | ||
| </style> | ||
| </template> | ||
| </dom-module> | ||
| <!-- Apply the theme attribute to any text-field in your app --> | ||
| <div> | ||
| <vaadin-text-field theme="special-field"></vaadin-text-field> | ||
| </div> | ||
| ``` | ||
| # Theme Attribute and Subcomponents | ||
@@ -475,3 +498,2 @@ | ||
| border-radius: 9px; | ||
| ... | ||
| } | ||
@@ -553,2 +575,2 @@ </style> | ||
| # External resources | ||
| - [Polymer styling documentation](https://www.polymer-project.org/2.0/docs/devguide/style-shadow-dom) | ||
| - [Polymer styling documentation](https://polymer-library.polymer-project.org/2.0/docs/devguide/style-shadow-dom) |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by12.08%
40625
- Number of package files
- increased by20%
6
- Lines of code
- increased by90.74%
206
- Number of lines in readme file
- increased by4.09%
560