On Web Components

Components were designed to share reusable code within a project. Sometimes between projects. But, what if a projects' base technology is fundamentally different (Ember, React, Vue)?Luckily all web apps speak Javascript and the DOM which is where native web components come in.

Hybrids (Web Component Framework)

Hybrids Logo

Frameworks serve the purpose ofabstracting away browser inconsistencies, providing aricher API for developmentand tools forautomation testing.Hybridsaccomplishes all this in a small 19.6kb (6.3kb gzipped) plus some for browser compatibility.

Hybrids Browser Support

Polyfills (Browser support)

To achieve this level of browser support with a modern web standard such as web components a polyfill. There are additional challenges such as CSS scoping that are essential for true web components. Hybrids integrates conditional shims and polyfills to handle this as best as it can.

Testing (Automation)

I've found leveraging Hybrids, Karma and Jasmine can lead to some really clean automation tests. Hybrids offers an importablehtmlhelpers, which is the same helper it uses under the hood for its own testing and base functionality. So long as you pay close attention to when you need to target ashadowRootrendering tests become easy with standard DOM methods to manipulate and access the details of your component.

it('renders logo with src and alt', () => {
  return renderComponent(html`<my-component></my-component>`).then(component => {
    let img = component.shadowRoot.querySelector('[data-test-id=componentImg]')



Initially I had great success bundling together Hybrids withParcel. It was as simple as pointing parcel to my html index.

However, Parcel is built for websites rather than consumable libraries. Thus I moved on to Webpack.


Assuming you have asrc/index.jsfile that imports a component it's pretty simple to get started. I unfortunately cannot include a reference to the closed source repository here but it should get the idea across for a base webpack configuration. This config also supports JS files thatimporting CSS into components which Hybrids supports.

// ./webpack.config.js
const path = require('path');

module.exports = function(env, argv) {
  return {
    context: path.resolve(__dirname),

    entry: path.resolve(__dirname, 'src/index.js'),
    output: {
      path: path.resolve(__dirname, 'dist'),
      filename: argv.mode === 'test' ? '[name].js' : 'index.js',

    module: {
      rules: [
          // Inline/Component CSS
          test: /\.css$/,
          use: [ "css-loader" ],
        }, {
          // Javascript
          test: /\.m?js$/,
          exclude: /(node_modules)/,
          use: {
            loader: 'babel-loader',
            options: {
              presets: [
                [ '@babel/preset-env', { modules: false } ]

Component Structure

Finally, I landed on the this project structure which I hope you may be inspired by if you follow in these footsteps.

  • src

    • components

      • component-name

        • index.js
        • view.js
        • test.js
        • style.css

Wish I could post the full project here and go into more detail. Even still, I hope this serves as a guiding light for those interested in exploring web components in their next project.