This project is not covered by Drupal’s security advisory policy.

Web components are the future. Not layout systems, not template engines, not endless tpl files. is an emerging web industry standard to replace all of that. This module allows your front end people to develop exclusively in things like polymer and to have no knowledge of Drupal to do work for Drupal.

It has support for multiple component engines but we initially support Polymer which is incredibly powerful for creating simple reusable, well documented templates.

Modules included in this package

Web components

API that helps with managing the integration of web components. This establishes webcomponent as an entity for storage and tracking. This sets up for a workflow where you can update your web component repo (polymer initially supported) and locate it in your theme and all the places these items are used throughout your entire site will automatically reflect this change. No template changes, no updating CSS outside of your style guide. If you use this in body fields, in tpl files, in viewed, anywhere, it will be updated as soon as you update your web component style guide. On theme cache clear, this rebuilds off the file system to make the drupal webcomponent entity to match what's in the file system (think style, real visible styles to end users as configuration of sorts!).

Because of the current level of compatibility across browsers, this also adds support for a sites/all/libraries/webcomponents/webcomponentsjs folder where you'd place the polyfill to fill in the gaps in browser coverage (See for details).

Web components : Polymer parser

Support for sites/all/libraries/webcomponents/polymer directory. It also utilizes the webcomponent entity type so that it saves after parsing html files it finds, making Drupal aware of all the polymer components it finds. The file also describes the workflow for developing components with polymer and building them for production usage.

Web components : Apps

Automatic routing and integration for one-page polymer apps (via webcomponents_polymer). This will take anything dropped into sites/all/libraries/webcomponents/polymer/apps/ and automatically create menu paths, permissions, and data wiring based on analyzing manifest.json. See for full details on how to utilize this workflow but it's pretty amazing! If you make a one-page app called `phone-book` then it'll make a path in Drupal called apps/phone-book and then with a simple edit to the manifest.json file for the app it'll create a apps/phone-book/data path and wire it up. Then write a response from that PHP function on the other side and you're done. Yes, this is probably just for simple one-page-apps as you could hard code.

Web components : Display modes

Support for custom display modes that mirror web components. This is the most powerful aspect of webcomponents is using this sub-module to simplify or even completely bypass drupal's templating system. It requires field_formatter_settings module and you map your display mode. If you name your webcomponents appropriately, you can even tap into things like Display Inherit module to automatically have template variable settings bubble up for bulk management.

Web components : Display Suite (ds)

Support for generating Display mode template / layouts that mirror webcomponents. This is potentially even more powerful then display modes as it can be used to highjack anything DS can hijack and run it through a webcomponent (but requires DS which I know people are very opinionated about).

Web components : Templates

Support for automatically creating wysiwyg templates that match the web components found on import. This lets you use existing wysiwyg template integration workflows to let your content authors inject items that relate directly to your style guide / web components.

Roadmap / things that would be great to add

  • drush support to pull in polymer compatibility library (webcomponent / polymer api module port)
  • developer scripts to help automate polymer install / getting an example environment all setup
  • Example polymer elements library for Drupal to get up and running quickly
  • drush recipes that pull together module base required and invoke drush script to pull in polyfill stuff
  • Example core theme that's completely hollowed out and replaced w/ polymer components
  • Add status value to webcomponent (for if some get removed later on)
  • Support views row style (wiring up a view row to a web component)
  • Support tracking of all used web components (so you can alert users if they get updated)
  • Support for HAX, a headless authoring system to allow inline editing of webcomponent items
  • Drupal 8 (accepting collaborators for this)
Supporting organizations: 
Developed & fixed the internet

Project Information