Web Com­po­nents

Web Designer - - Javascript in 2019 -

The con­cept of a com­po­nent is used heav­ily in Javascript frame­works. They are used to break apart a project into sev­eral re­us­able chunks that can be moved about in­de­pen­dently of one an­other. But what hap­pens when it’s time to change frame­work? Pre­vi­ously writ­ten com­po­nents will no longer work. Ei­ther there is added work­load to con­vert the com­po­nents, or the project stays tied to that frame­work.

Web com­po­nents are a so­lu­tion to that is­sue. They are writ­ten us­ing na­tive web tech­nolo­gies, are self-con­tained and ex­pose val­ues and be­hav­iours through at­tributes like any other HTML el­e­ment.

They are made up of three sep­a­rate spec­i­fi­ca­tions – HTML tem­plates, shadow DOM and cus­tom el­e­ments.

HTML tem­plates de­fine the vis­ual ap­pear­ance of a com­po­nent. They con­tain the struc­ture of con­tent, which can then be copied and reused for each com­po­nent on the page.

Shadow DOM is a con­cept of keep­ing the in­ter­nal markup of the com­po­nent away from the rest of the doc­u­ment. This keeps styles and other logic from break­ing out and af­fect­ing other com­po­nents.

Fi­nally, cus­tom el­e­ments are the glue that holds ev­ery­thing to­gether. They are re­spon­si­ble for the life­cy­cle of the com­po­nent, which can in­clude ex­tra logic for when a com­po­nent is added or re­moved from the page.

Web com­po­nents can be used along­side their frame­work coun­ter­parts. As they are sup­posed to act like na­tive el­e­ments, most frame­works will work with them with­out is­sue. Some frame­works, like An­gu­lar, may need to be told of their ex­is­tence ahead of time to func­tion prop­erly.

As they can be read­ily com­posed to­gether, com­po­nents can be im­ported from many sources. Web­sites like we­b­com­po­nents.org pro­vide sev­eral ready-made el­e­ments that can be dropped in and used straight away.

While the con­cept of a web com­po­nent has been around since 2011, the spec­i­fi­ca­tions have con­stantly changed. In 2018 things set­tled down, with Fire­fox im­ple­ment­ing the lat­est ver­sions of shadow DOM and cus­tom el­e­ments spec­i­fi­ca­tions in Oc­to­ber. With Edge due to ship their im­ple­men­ta­tions in 2019, all ma­jor browsers will na­tively sup­port them. • we­b­com­po­nents.org

Newspapers in English

Newspapers from UK

© PressReader. All rights reserved.