Directory

← Back

granite-external-dependencies

A set of elements and mixins to grab external dependencies (CSS and JS...)

Author

Rating

Popularity

<100

Published on webcomponents.org

granite-external-dependencies

A set of elements and mixins to grab external dependencies (CSS and JS...)

GraniteCssInjector mixin

A mixin to load external CSS files and dynamically inject them in the Shadow DOM of the element.

Elements using this mixing must override two static getters :

  • nodeModulesPath: this getter returns the relative path to the node_modules folder
  • cssFiles: this getter returns an array with an object for every dependency. The dependency object need name and path propeties, where the path is the dependency relative path from node_modules folder

Examples:

  static get nodeModulesPath() {
    return `${GraniteExternalDependencies.pathFromUrl(import.meta.url)}../../../`;
  }

  static get cssFiles() {
      return [
          { 
            name: 'externalCss', 
            path: `@granite-elements/granite-external-dependencies/demo/external-css.css` 
          }
      ];
  }

Compatibility

(Loading compatibility data...)

Was this helpful? Need more help?
Leave a comment or a question below. You can also join the chat on Discord or ask questions on StackOverflow.

Version

Dependencies

  • @polymer/polymer#^3.0.0
Released
2018-06-18
Maturity
IMPORTED
License
MIT License

Compatibility

Framework
Polymer 3.0+
Browser
Browser Independent

granite-external-dependencies - Vaadin Add-on Directory

A set of elements and mixins to grab external dependencies (CSS and JS...) granite-external-dependencies - Vaadin Add-on Directory
[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/LostInBrittany/granite-external-dependencies) # granite-external-dependencies A set of elements and mixins to grab external dependencies (CSS and JS...) ## GraniteCssInjector mixin A mixin to load external CSS files and dynamically inject them in the Shadow DOM of the element. Elements using this mixing must override two static getters : - `nodeModulesPath`: this getter returns the relative path to the `node_modules` folder - `cssFiles`: this getter returns an array with an object for every dependency. The dependency object need `name` and `path` propeties, where the path is the dependency relative path from `node_modules` folder Examples: ```js static get nodeModulesPath() { return `${GraniteExternalDependencies.pathFromUrl(import.meta.url)}../../../`; } static get cssFiles() { return [ { name: 'externalCss', path: `@granite-elements/granite-external-dependencies/demo/external-css.css` } ]; } ```
View on NPM
View on GitHub

granite-external-dependencies version 1.0.0
### Dependencies * @polymer/polymer#^3.0.0

granite-external-dependencies version 1.0.1
### Dependencies * @polymer/polymer#^3.0.0

granite-external-dependencies version 1.0.2
### Dependencies * @polymer/polymer#^3.0.0

granite-external-dependencies version 1.0.3
### Dependencies * @polymer/polymer#^3.0.0

granite-external-dependencies version 1.0.4
### Dependencies * @polymer/polymer#^3.0.0

granite-external-dependencies version 1.0.5
### Dependencies * @polymer/polymer#^3.0.0

Online