Web componentd component internal event callback and pain point analysis

Written in front

I have been working on Web components (WC) recently and have achieved some initial results. But today I want to take a look at WC again.

What exactly is WC?

Simply put, Web Component encapsulates components in the form of HTML tags, and no additional JS code is required when using them.

Components are the development direction of the front-end. Putting aside the surrounding technology ecosystem, React and Vue are both component frameworks. Therefore, WC can be seen as an extension of the original label. In the final analysis, it is still a label!

Similar to the <video></video> tag, it has more styles and operational attributes than native tags.

Since Google controls the Chrome browser, it has been promoting the browser's native components, namely the Web Components API.

Compared with third-party frameworks, native components are simple, direct and intuitive, do not need to load any external modules, and have a small amount of code. Everything seems perfect, and it seems that it can be used to replace React, Vue and the like.

Current flaws

There are some minor issues when using it with other web frameworks, which can cause some problems in the development experience.

1. Callback of component internal events

For example, the OK button in a pop-up component ( <my-dialog></my-dialog> ), how is its event triggered?

class myDialog extends HTMLElement {
  // ...
  connectedCallback() {
    const shadowRoot = this.attachShadow({ mode: 'open' });
    shadowRoot.innerHTML = `
      <div class="dialog">
        <div class="dialog-content">
          <div class="dialog-body">
            Pop-up content</div>
 
          <button id="okBtn">OK</button>
        </div>
      </div>
    `;
     shadowRoot.querySelector('#okBtn').addEventListener('click', () => {
      // Define events inside the component this.dispatchEvent(new CustomEvent('okBtnFn'));
    });
  }
} 
customElements.define('my-dialog', myDialog);

The current solution is to use new CustomEvent() inside the custom element and use addEventListener to listen externally. This way of writing is very ugly, as if we have returned to the era of writing applications with native JS.

<my-dialog></my-dialog> 
<script>
  export default {
    created() {
      document.addEventListener('okBtnFn', function(){
        // Click the pop-up button to trigger the callback event});
    }
  }
</script>

2. Component style coverage

For developers, it is inevitable that they will need to adjust the internal styles of components. Whether you use antd , vant or other component libraries, WC's CSS anti-pollution mechanism makes it difficult for you to modify internal styles. This requires you to pay some price to modify the internal style in disguise

3. Relative path problem of internal resources in components

Currently, any component directly based on Custom Element v1, Template and HTML Import cannot be completely resource independent - using any resource files encapsulated internally without knowing the user's environment and without adding additional restrictions to the user. For example, if you have a custom icon component:

class MyIcon extends HTMLElement {
    static get observedAttributes() { return ['name','size','color'] }
    constructor() {
        super();
        const shadowRoot = this.attachShadow({ mode: 'open' });
        shadowRoot.innerHTML = `
            <svg class="icon" id="icon" aria-hidden="true" viewBox="0 0 1024 1024">
                <use id="use"></use>
            </svg>        
    } 
    attributeChangedCallback (name, oldValue, newValue) {
        if( name == 'name' && this.shadowRoot){
            // If there is no icon.svg file in the root directory of the project being used, then gg
            this.use.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', `./icon.svg#icon-${newValue}`);
        }
    }
}
customElements.define('my-icon', MyIcon);

If there is no icon.svg file in the root directory of the project you are using, then gg. If you use a cdn path here, there will be cross-domain issues.

4. Form component value acquisition problem

The value of the <input>, <textarea> or <select> tag in the Shadow DOM will not be automatically associated in the form.

Sample code:

// web component
class InputAge extends HTMLElement {
  constructor() {
    super();
  }  
// connect component
  connectedCallback() {
    const shadow = this.attachShadow({ mode: 'closed' });
    shadow.innerHTML = `<input type="number" placeholder="age" min="18" max="120" />`;
  }
}
// register component
customElements.define( 'input-age', InputAge );

After the WC component is used

<form id="myform">
  <input type="text" name="your-name" placeholder="name" />
  <input-age name="your-age"></input-age>
 
  <button>submit</button>
</form>
 
<script>
 const form = document.getElementById('myform');
 
  form.addEventListener('submit', e => {
    
    e.preventDefault();
    console.log('Submitted data:');
 
    const data = new FormData(form);
    for (let nv of data.entries()) {
      console.log(` ${ nv[0] }: ${ nv[1] }`);
    }
 
  });
</script>

value of input-age cannot be obtained when submitting. There will be solutions, of course, but they will be complicated.

5. Others

In addition, the lack of data binding and state management is also a defect of WC, which will not be discussed here.

Write at the back

WC refers to enriching the DOM features of HTML, making HTML more reusable

WC can be used as a native tag and run in any front-end framework or without a framework.

In combination with the current mainstream technology stack, the main problem with WC is that in complex components, data communication and event delivery have certain usage costs.

Compatibility issues, such as the :part method that can override internal styles

The above is the detailed content of the internal event callback and pain point analysis of Web componentd components. For more information about Web componentd event callback and pain points, please pay attention to other related articles on 123WORDPRESS.COM!