Shulou(Shulou.com)06/02 Report--

This article will explain in detail the example analysis of event callbacks within Web componentd components. The editor thinks it is very practical, so I share it with you as a reference. I hope you can get something after reading this article.

What on earth is WC?

To put it simply, Web Component is to encapsulate components in the form of html tags without writing additional js code when using them.

Components are the development direction of the front end. Apart from the surrounding technology ecology, React and Vue are both component frameworks. Therefore, WC can be seen as an extension / extension of the native tag, in the final analysis, it is still a tag!

Similar to tags, it has more rich styles and actionable attributes than native tags.

Because Google has mastered the Chrome browser, it has been promoting the native component of the browser, namely Web Components API.

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

The current defects

There are some minor problems with using it with other web frameworks, which can cause some confusion to the development experience.

1. Callback of internal events in the component

For example, how is the event triggered by an OK button in a pop-up component ()?

Class myDialog extends HTMLElement {/ /... ConnectedCallback () {const shadowRoot = this.attachShadow ({mode: 'open'}); shadowRoot [XSS _ clean] = `Pop-up content determination` ShadowRoot.querySelector ('# okBtn') .addEventListener ('click', () = > {/ / component internally defined event this.dispatchEvent (new CustomEvent (' okBtnFn'));});}} customElements.define ('my-dialog', myDialog)

Now the solution is to customize the event new CustomEvent () within custom element and listen with addEventListener externally. This kind of writing is very ugly, as if it is back to the era of native JS writing applications.

Export default {created () {document.addEventListener ('okBtnFn', function () {/ / Click the pop-up button to trigger a callback event});}} 2, component style override

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

3. The relative path of resources within the component.

For now, no component based directly on Custom Element v1, Template, and HTML Import can achieve full resource independence-- using any internally encapsulated resource files without knowing the user's environment and without imposing additional restrictions on 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 [XSS _ clean] = `} attributeChangedCallback (name, oldValue, newValue) {if (name = = 'name' & & this.shadowRoot) {/ / if you are using a project, the root directory does not have an icon.svg file Then gg this.use.setAttributeNS ('http://www.w3.org/1999/xlink',' xlink:href', `. / icon.svg#icon-$ {newValue}`) } customElements.define ('my-icon', MyIcon)

If you are using a project in which the root directory does not have an icon.svg file, then gg. If you use the cdn path here, there will be cross-domain problems.

4. Value acquisition problem of form form class component

Value that contains tags such as, or, etc. in the Shadow DOM will not be automatically associated in the form form.

Sample code:

/ / web componentclass InputAge extends HTMLElement {constructor () {super ();} / connect component connectedCallback () {const shadow = this.attachShadow ({mode: 'closed'}); Shadow [XSS _ clean] = ``;}} / / register componentcustomElements.define (' input-age', InputAge)

After the WC component is used

Submit 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]}`);}})

The value of input-age could not be obtained when submitting. Of course there will be a solution, but it will be very complicated.

5. Other

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

This is the end of the article on "sample analysis of event callbacks within Web componentd components". I hope the above content can be helpful to you, so that you can learn more knowledge. if you think the article is good, please share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.