Hello

Who am I?

Engineering Manager for Web @ hooq.tv

Email: huijie[at]hooq.tv

A few months ago, I came across an article about Web Components...

🤔

So I decided to give it a try

And I want to share about my experiment with Web Components

  • Browser Compatibility
  • ES5 vs ES2015
  • Styling Web Components
  • Slots & Templates
  • Typescript

Before we start...

Heard of web components?

Why web components?

  • Part of web standards.
  • Be knowledgeable in native language and API rather than being "locked into" specific frameworks.
  • Reuseable code.
  • Build leaner sites.
  • Compatible with 3rd party web frameworks.
  • Major 3rd party web frameworks/libraries are supportive of web components.

Browser Compatibility

ES5 vs ES2015

  • Based on README from webcomponents.
  • Custom Elements v1 spec is not compatible with ES5 style classes.
  • If your project transpiles code to ES5, it will not work with native implementation of Custom Elements.
  • Can use native-shim.js as workaround (In this demo's repo it can be found in /templates/polyfill.js).

Styling Web Components

  • CSS defined inside web component is scoped to the component itself, which means
  • Component styles will not pollute global styles.
  • Elements inside different components can use identical class names, with their own unique style attributes.

You can still use global styles (but to a certain degree).

  • Elements used inside web components are still affected by globally defined styles for common tags (h1, p, a, button, etc)
  • However, elements inside web components will not be able to access styles from imported stylesheets via usual
    <link rel="stylesheet" href="…" />
    method.
  • Workaround is to use
    
    <style>
    	@import "//cdn.muicss.com/mui-0.9.43/css/mui.min.css";
    	…
    								
    inside the web component while initialising the component's innerHTML via shadowRoot.

How to prevent global styles from affecting components inside the web component?

From css-tricks: Shadow DOMing the template

Slots & Templates

Typescript

To be discussed in future talks

  • State Management
  • Pre-rendered / server-side rendered pages

My Conclusion

Should we ditch our frontend frameworks now?

Can I start to use web components in my new/existing projects?

It depends...

  • On your project requirements
    • Browser support
    • How complex is your app?
  • Bear in mind that Web Components is mainly about UI
  • If you want to use as little 3rd-party frameworks/libraries as possible
  • Word of caution: Avoid the "shiny ball syndrome"

Try it out!

https://github.com/EdgeJay/web-components-demo

Reference materials

Questions?

Thank You!

Reach me at

Email: huijie[at]hooq.tv