As developers, we all know the importance of componentization, standardization and re-use of codes, and the front-end never stopped its attempts at front-end componentization, resulting in a variety of componentization techniques, from front-end frames such as Vue React to a webpacking tool
But at the front end there’s been a lack of such a modularized standard and browser-level primary component programme.
Web Components are a Web component programme being tried by WHATWG and W3C to provide browser-level support for the development of front-end components. It consists of four main technologies: Shadow DOM, Custom Elements, HTML Import, HTML Template
The Polymer project is a Google-based framework based on the Web Components mechanism, located in simple Polyfil and easy-to-use envelopes, including data binding, template declarations, event systems, etc. Google used it on YouTube last year.
Pollymer 3.0.00 just released 20 days ago, just as B station player recently needed to reassemble all UI components, a study of which is done below, all demo is hosted in [polymer-demos] (https://github.com/DIYgod/polymer-demos), and these little demo are only used as simple experiences to suggest reading [official document] for the complete function of Polymer (https://www.polymer-project.org/3.0/docs/devguide/feature-overview)
#!
Browser support
The greatest impediment to the current use of Web Compponents is the low level of browser support and the relatively large size of Polykills (90+kb)
Only new versions of the Chrome Opera and Safari are currently available for full primary support, which can be consulted [caniuse.com] (https://caniuse.com/#search=web%20components), which can be supported by Edge IE11+ Firefox Safari9+ (https://github.com/webcomponentsjs)
Polyfils has three main documents:
: All polyfills
- <PROTECTED_BLONK_18 > : Can detect browser support and then load the corresponding polyfills, which can reduce unnecessary waste for native-supported browsers
- <PROTECTED_BLONK_19 > : registration of Custodial Elements requires an ES6 syntax, so when the browser does not support ES6 it needs to do additional processing and then quote the file.
The best practices for the most compatible browsers in general are as follows:
♪ Protected ♪
<PROTECTED_BLONK_20>, which must be quoted separately, <<PROTECTED_BLONK_21> may be combined with your code, Webpack, but note that <PROTECTED_BLOCK_23>, without additional compilations, other codes are compiled into ES5 by babel and full practice is available [polymer-demos] (https://github.com/diYgod/polymer-demos)
Custom elementes
Now try to define a simplest self-defined element, to succeed a class from < <PROTECTED_BLONK_24> and then to <PROTECTED_BLONK_25>
** Effects**
♪ Protected ♪
HTML Code
♪ Protected ♪
** JS Code**
♪ Protected ♪
Shadow dom
Shadow dom is a hidden, independent DOM whose HTML CSS and behavior are separated from the regular DOM tree so that the different functions are not mixed and the internal and external CSS do not affect each other.
Shadow dom is not a new thing, and it’s been used by browsers to seal the internal structure of an element. Take as an example the elements <<PROTECTED_BLONK_26>. All you can see is the label < < PROTECTED_BLONK_27> > , which actually contains a series of buttons and controllers in its Shadow dom
In the following example, the p label in Shadow dom defines the CSS attribute <<PROTECTED_BLONK_28>, which does not leak outside.
** Effects**
♪ Protected ♪
HTML Code
♪ Protected ♪
** JS Code**
♪ Protected ♪
HTML plans
Use <PROTECTED_BLONK_29> and <PROTECTED_BLONK_30> to form shadow DOM
** Effects**
♪ Protected ♪
HTML Code
♪ Protected ♪
** JS Code**
♪ Protected ♪
Data binding
To support a two-way data binding, you can try to edit the input box below or modify the properties directly on the console <<PROTECTED_BLONK_31>, and change the properties will be reflected in DOM immediately
** Effects**
♪ Protected ♪
HTML Code
♪ PROTECTED ♪
** JS Code**
♪ Protected ♪
Custom events
Now we’re going to define a self-defined element of an event called < <PROTECTED_BLONK_32> > .
** Effects**
♪ Protected ♪
HTML Code
♪ Protected ♪
** JS Code**
♪ Protected ♪
<scirpt src=https://cdn.jsdelivr.net/gh/DIYgod/[email protected]/dist/webcomponents-loader.js>/scirpt>
♪ Protected ♪