Get best of the week

Web components in a real project


Hello everyone! My name is Arthur, I work as a frontend developer at Exness. Not so long ago, we switched one of our projects to web components. I’ll tell you what problems we had to deal with, and how many of the concepts that we are used to when working with frameworks are easily transferred to web components.


Looking ahead, I’ll say that the implemented project successfully passed testing on our wide audience, and the size of the bundle and loading time were significantly reduced.


I assume that you already have a basic understanding of the technology, but even without it it will be clear that it is quite convenient to work with web components and organize the architecture of the project.


Why web components?


, ; ui- . - , html+js, . , . , Svelte , , Preact. , , .


?


, , - . . , (~2kB), , — , . IE11 Edge. , IE , Edge . UC Browser QQ Browser, .


:


  • <slot></slot> IE11 & Edge ;
  • html-. .

LitElement


« boilerplate- ! , HTMLElement » — , -. , , — LitElement (~7kb). lit-html .


, LitElement - , .


LitElement — , - « ». 7kB, LitElement API. boilerplate-.


-


, lit-html ~3.5kB . DOM- - : , . , ( ):


import { html, render } from 'lit-html'

const ui = data => html`...${data}...`

render(ui('Hello!'), document.body)

:


const myHeader = html`<h1>Header</h1>`
const myPage = html`
  ${myHeader}
  <div>Here's my main page.</div>
`

:


const defineFxComponent = (tagName, FxComponent, Parent = LitElement) => {
  const Component = class extends Parent {
    render() {
      return FxComponent(this.data)
    }
  }
  customElements.define(tagName, Component)
}

defineFxComponent('custom-ui', ui)

render(html`<custom-ui .data="Hello!"></custom-ui>`, document.body)

, , , , lit-html. . , , .


svg


, ( API) — svg``. , , html`` . , TemplateResult ( html``) — , . svg`` SVGTemplateResult .



— , , . lit-html DOM , Part. Part , , , — .


, Part:


  • (NodePart);
  • (AttributePart);
  • (BooleanAttributePart);
  • (PropertyPart);
  • (EventPart).

.


value — , . setValue(). DOM , , commit() ( ).


( NodePart — ), :


import { directive } from 'lit-html'

const renderCounter = directive(() => part =>
  part.setValue(part.value === undefined ? 0 : part.value + 1)
)

Lit-html . , , , , html .


state . .


. . .


shady-render


lit-html Shadow DOM, . lit-html shady-render, .



HOC — , React Vue. , - -. - , HOC , , .



redux, . , store redux. mapStateToProps ( , HOC, redux), , DOM, redux. DOM .


import { bindActionCreators } from 'redux'

export default store => (mapStateToProps, mapDispatchToProps) => Component =>
  class Connect extends Component {
    constructor(props) {
      super(props)
      this._getPropsFromStore = this._getPropsFromStore.bind(this)
      this._getInheritChainProps = this._getInheritChainProps.bind(this)

      //  mapStateToProps
      this._inheritChainProps = (this._inheritChainProps || []).concat(
        mapStateToProps
      )
    }

    //      store
    _getPropsFromStore(mapStateToProps) {
      if (!mapStateToProps) return
      const state = store.getState()
      const props = mapStateToProps(state)

      for (const prop in props) {
        this[prop] = props[prop]
      }
    }

    // Callback     store,    mapStateToProps   
    _getInheritChainProps() {
      this._inheritChainProps.forEach(i => this._getPropsFromStore(i))
    }

    connectedCallback() {
      this._getPropsFromStore(mapStateToProps)

      this._unsubscriber = store.subscribe(this._getInheritChainProps)

      if (mapDispatchToProps) {
        const dispatchers =
          typeof mapDispatchToProps === 'function'
            ? mapDispatchToProps(store.dispatch)
            : mapDispatchToProps
        for (const dispatcher in dispatchers) {
          typeof mapDispatchToProps === 'function'
            ? (this[dispatcher] = dispatchers[dispatcher])
            : (this[dispatcher] = bindActionCreators(
                dispatchers[dispatcher],
                store.dispatch,
                () => store.getState()
              ))
        }
      }

      super.connectedCallback()
    }

    disconnectedCallback() {
      //     store
      this._unsubscriber()
      super.disconnectedCallback()
    }
  }

store , :


// store.js
import { createStore } from 'redux'
import makeConnect from 'lite-redux'
import reducer from './reducer'

const store = createStore(reducer)

export default store

//   
export const connect = makeConnect(store)

// Component.js
import { connect } from './store'

class Component extends WhatEver {
  /* ... */
}

export default connect(mapStateToProps, mapDispatchToProps)(Component)


. . , : get observedAttributes() - get properties() LitElement. , :


const withPassword = Component =>
  class PasswordInput extends Component {
    static get properties() {
      return {
        //   super.properties    type
        ...super.properties,
        addonIcon: { type: String }
      }
    }

    constructor(props) {
      super(props)
      this.type = 'password'
      this.addonIcon = 'invisible'
    }

    setType(e) {
      this.type = this.type === 'text' ? 'password' : 'text'
      this.addonIcon = this.type === 'password' ? 'invisible' : 'visible'
    }

    render() {
      return html`
        <div class="with-addon">
          <!--    -->
          ${super.render()}
          <div @click=${this.setType}>
            <custom-icon icon=${this.addonIcon}></custom-icon>
          </div>
        </div>
      `
    }
  }

customElements.define('password-input', withPassword(TextInput))

...super.properties get properties(), . super.render() render, .


HOC :


  • , ;
  • , - , - , HOC', ;
  • , HOC.

Shadow DOM


, ui- . , : (values, errors, touched), , submit, reset.


, , . , , , : -, <form> . ...


1. - Shadow DOM


, — - , Shadow DOM , HOC , . .


, <form> HTMLFormElement (, submit Enter), . , , <form>, — <form> .


. render- React:


//  
import { LitElement, html } from 'lit-element'

class LiteForm extends LitElement {
  /* ...  ... */

  render() {
    return html`<form @submit=${this.handleSubmit} method=${this.method}>
      ${this.formTemplate(this)}
    </form>`
  }
}

customElements.define('lite-form', LiteForm)

//  
import { html, render } from 'lit-element'

const formTemplate = ({ values, handleBlur, handleChange, ...props }) =>
  html`<input
      .value=${values.firstName}
      @input=${handleChange}
      @blur=${handleBlur}
    />
    <input
      .value=${values.lastName}
      @input=${handleChange}
      @blur=${handleBlur}
    />
    <button type="submit">Submit</button>`

const MyForm = html`<lite-form
  method="POST"
  .formTemplate=${formTemplate}
  .onSubmit=${{/*...*/}}
  .initialValues=${{/*...*/}}
  .validationSchema=${{/*...*/}}
></lite-form>`

render(html`${MyForm}`, document.getElementById('root'))

, . . , withField withError.


, HOC' . ( , — , ), , :


//   IS_LITE_FORM —    ,      
const getFormClass = element => {
  const form = element.closest(`[${IS_LITE_FORM}]`)
  if (form) return form

  const host = element.getRootNode().host
  if (!host) throw new Error('Lite-form not found')
  return host[IS_LITE_FORM] ? host : getFormClass(host)
}

: , . getRootNode, Shadow DOM — .


withField :


const formTemplate = props =>
  html`<custom-input name="firstName"></custom-input>
    <custom-input name="lastName"></custom-input>
    <button type="submit">Submit</button>`

, , … , Shadow DOM, .


Shadow DOM :host :host-context


CSS . Shadow DOM, , . , , , :


:host([rtl]) {
  text-align: right;
}

:host-context(body[dir='rtl']) .text {
  text-align: right;
}

:host , . , rtl.


:host-context , Shadow DOM, . .text dir, body.


Shadow DOM


Shadow DOM : target, -. DOM, , target , .


Shadow DOM composed. Shadow DOM, composed bubbles true. Shadow DOM.


Shadow DOM


-, - (-, , ) Shadow DOM. . ( , ) .


, , , , Shadow DOM . , , , Shadow DOM. , Shadow DOM.


-, - querySelector, Shadow DOM. , , Google Tag Manager document.querySelector(...) .shadowRoot.querySelector(...) .shadowRoot.querySelector(...) .shadowRoot.querySelector(...)


Shadow DOM . LitElement :


createRenderRoot() {
  return this
}

Shadow DOM blur . withField, . , .


2.


Shadow DOM HTMLFormElement <form> — , , :


//  
class LiteForm extends HTMLFormElement {
  connectedCallback() {
    this.addEventListener('submit', this.handleSubmit)
  }

  disconnectedCallback() {
    this.removeEventListener('submit', this.handleSubmit)
  }

  /* ...  ... */
}

customElements.define('lite-form', LiteForm, { extends: 'form' })

, :


//  
const MyForm = html`<form
  method="POST"
  is="lite-form"
  .onSubmit=${{...}}
  .initialValues=${{...}}
  .validationSchema=${{...}}
>
  <custom-input name="firstName"></custom-input>
  <custom-input name="lastName"></custom-input>
  <button type="submit">Submit</button>
</form>`

render(html`${MyForm}`, document.getElementById('root'))

customElements.define is , , «» . customElements.define, , .


. : Safari , . iOS ( Chrome, Firefox .). , Apple , 13 Safari iOS . , , Safari iOS .


3.


, , . :


//    
export const withForm = ({
  onSubmit,
  initialValues,
  validationSchema,
  ...config
} = {}) => Component =>
  class LiteForm extends Component {
    connectedCallback() {
      this._onSubmit = (onSubmit || this.onSubmit || function () {}).bind(this)
      this._initialValues = initialValues || this.initialValues || {}
      this._validationSchema = validationSchema || this.validationSchema || {}
      /* ... */
      super.connectedCallback && super.connectedCallback()
    }

    /* ...  ... */
  }

connectedCallback() (onSubmit, initialValues, validationSchema, .) , withForm(), . , , , . , :


//       :
//  -  LitElement
import { withForm } from 'lite-form'

class LiteForm extends LitElement {
  render() {
    return html`<form @submit=${this.handleSubmit} method=${this.method}>
      ${this.formRender(this)}
    </form>`
  }
}

customElements.define('lite-form', withForm(LiteForm))

//       :
//   
import { withForm } from 'lite-form'

class LiteForm extends HTMLFormElement {
  connectedCallback() {
    this.addEventListener('submit', this.handleSubmit)
  }

  disconnectedCallback() {
    this.removeEventListener('submit', this.handleSubmit)
  }
}

customElements.define('lite-form', withForm(LiteForm), { extends: 'form' })

, , a withForm() , , HOC:


//  
import { withForm } from 'lite-form'

class UserForm extends LitElement {
  render() {
    return html`
      <form method="POST" @submit=${this.handleSubmit}>
        <custom-input name="firstName"></custom-input>
        <custom-input name="lastName"></custom-input>
        <button type="submit">Submit</button>
      </form>
    `
  }
}

const enhance = withForm({
  initialValues: {/*...*/},
  onSubmit: {/*...*/},
  validationSchema: {/*...*/}
})

customElements.define('user-form', enhance(UserForm))

Shadow DOM, . .



«-» « » — API, , . , , , . LitElement , — .


, Shadow DOM ( ). .


Shadow DOM , . Shadow DOM . CSS , DOM .


- , , , . , , .



webcomponents.org, Polymer, LitElement, lit-html, Vaadin Router, Vaadin Components, lite-redux, lite-form, awesome-lit-html, Polyfills, custom-elements-builtin polyfill

More articles:


All Articles