anchor.diff:  Due to the Shadow DOM encapsulation, applying normal CSS rules for a Vaadin Element is limited to the main element only.
   
   Therefore, in order to fully customize the appearance of Vaadin Elements, you need to use https://www.polymer-project.org/1.0/docs/devguide/styling.html#xscope-styling-details[CSS properties] and https://www.polymer-project.org/1.0/docs/devguide/styling.html#custom-css-mixins[CSS mixins].
  -Unfortunately these styles cannot be applied on a component level, but instead you need to provide styles in application level and also use the `is="custom-style"` attribute.
  -
  -Changing the icon color of [vaadinelement]#vaadin-date-picker# to `red` could be done with the following example.
  +Unfortunately, these styles cannot be applied on the component level. Instead you need to provide styles on application level and also use the `is="custom-style"` attribute.
  +
  +Changing the icon color of [vaadinelement]#vaadin-date-picker# to `red` can be done as in the following example:
   [source]
   ----
   <style is="custom-style">
  
positive.code: See the documentation of each element for a list of available properties and mixins.
  
  === Grid
  The [elementname]#vaadin-grid# element uses a `table` child element to declaratively configure columns, headers and footers.
  In case you’ll need to apply modifications to the declaratively configured [elementname]#vaadin-grid# columns, you must wait for the component to be fully initialized first.
  To do this, you can use the native element as a Promise.
  
  [source]
  ----
  
negative.code: 
  After the directive is declared, the element is available to be used in the `template` of your component.
  
  Te following example uses the directive with the [elementname]#vaadin-date-picker# element. Replace the path with the element you are importing.
  
  [source, javascript]
  ----
  @Component({
    selector: 'my-component',
  