A mininum boilerplate to deliver a Polymer 3.x with Webpack, PostCSS and Service Workers ready.
<style>scoped tag of Polymer elements as string.
All modern browsers. 🕶
But as the features said, we are also transpiling the bundle for "oldie" browsers. Of course we are not covering things like IE11.
Clone this repository:
git clone --depth 1 https://github.com/PolymerX/polymer-skeleton [your-app-name]
.git folder and change details within:
Then start building your application!
webpack-dev-server on localhost
http://localhost:3000 with hot-reload and watch on
XO for code style, Stylelint for PostCSS linting, and WCT for components tests:
Run Lighthouse for testing the PWA capabilities:
(Almost) production-ready (
webpack --optimize-minimze and copy statics) to
dist folder. Also generating Service Workers. The command will also create the
module version of the
bundle ready to be loaded as
.pcss files will be watched, compiled and injected to the relative
<style> tag within the component template. The CSS is scoped to the component so don't worry about CSS specificity, you can also use
:root selectors. Read more about styling web components and custom CSS properties.
We also include Autoprefixer plugin, if you don't know how it works (...and you should), it allows you to write CSS without worrying about vendor prefixes. Just write your css properties prefix-free and let autoprefixer do the work for you when compiling.
How about commons styles?
You can simply
import any other
.pcss file within your main component
.js file and print it inside the
We are getting the
webpcomponents-loader.js polyfill from GitHub using NPM/Yarn and copying it into a
vendor folder with a
PolymerX © MIT