The native API of the future trend of the front end: web components

** Declare ： Without permission , Do not reprint .** Web Components It's been a long time , So you may have heard of , I even learned , I understand very well . But it doesn't matter , You can go over it again , Learn from the past . ## Browser native ability more and more strong . ### js Once upon a time `JQuery`, It's a must learn skill for front-end beginners , It is a necessary library for front-end projects . Its strength lies in its simplification `dom operation `( Powerful selector ) and `ajax`( asynchronous ) operation . Now native api `querySelector()`、`querySelectorAll()`、`classList` The emergence of etc. has been greatly weakened dom operation , `fetch`、 Based on `promise` Of `axios` Has completely replaced `ajax`, Even better ,`async-await` It's really easy to use . [You-Dont-Need-jQuery](https://github.com/nefe/You-Dont-Need-jQuery/blob/master/README.zh-CN.md#css--style) ### css css Preprocessor ( Such as `scss`、`less`) It's project engineering css The best choice for . Its strength is support ** Variables **、** The style is regular and nest like **、** Function **. Now css Variables are already supported `(--var)` 了 , Patterns, rules, nests are also planned , Function `calc()` It's also very powerful , And support `attr()` Use , And `css-module` Modularity . [ No precompiling ,CSS It's time to write the nest directly ](https://github.com/75team/w3c/blob/master/articles/20180712_anjia_%E4%B8%8D%E7%94%A8%E9%A2%84%E7%BC%96%E8%AF%91%EF%BC%8CCSS%E7%9B%B4%E6%8E%A5%E5%86%99%E5%B5%8C%E5%A5%97%E7%9A%84%E6%97%A5%E5%AD%90%E5%B0%B1%E8%A6%81%E5%88%B0%E4%BA%86.md) [w3c The style is regular and nest like css-nesting-module](https://drafts.csswg.org/css-nesting/) It used to be cool and complicated css Style and animation , Must be aided by css Preprocessor variables 、 Function or js Talent , Now use (`css-doodle`)[https://css-doodle.com/] Technology , It's cooler to achieve 、 More dazzling . [css-doodle sample reels ](https://codepen.io/yuanchuan/collections/popular/) ### web components Componentization `Web Components` You can build reusable components , One day in the future, abandon what we call frameworks and libraries , Use native directly API Or use based on Web Components Standard framework and Library Development , Do you think it's possible ？ I think it's possible . #### vue-lit [vue-lit](https://github.com/yyx990803/vue-lit), Described below ： > Proof of concept mini custom elements framework powered by @vue/reactivity and lit-html. The description uses custom elements, And the browser console elements Of DOM The structure also contains shadow-root. and custom element and shadow DOM yes web components An important part of . See below for details demo, Explain ： Examples of this document , Can be directly complicated to a html Of documents body in , Then turn on the preview directly in the browser . ```html ``` [ Original code interpretation ](https://github.com/yyx990803/vue-lit/blob/master/index.js) ```js // lit-html Templates , Provide html Templates ( Simple js Expression and event binding )、render Rendering capabilities import { render } from 'https://unpkg.com/lit-html?module' // reactivity yes vue3.0 At the heart of ,shallowReactive Shallow response ,effect It can be understood as watch, Provide attribute response and partial lifecycle processing import { shallowReactive, effect } from 'https://unpkg.com/@vue/reactivity/dist/reactivity.esm-browser.js' let currentInstance export function defineComponent(name, propDefs, factory) { if (typeof propDefs === 'function') { factory = propDefs propDefs = [] } // Custom elements custom element, Native API customElements.define( name, class extends HTMLElement { // Set the properties you want to listen to static get observedAttributes() { return propDefs } constructor() { super() // Attribute access vue In response to const props = (this._props = shallowReactive({})) currentInstance = this // lit-html Of html Generated templates const template = factory.call(this, props) currentInstance = null // bm onBeforeMount this._bm && this._bm.forEach((cb) => cb()) // shadowRoot,closed You can't go directly through js Get the defined customElement operation shadowRoot const root = this.attachShadow({ mode: 'closed' }) let isMounted = false effect(() => { if (isMounted) { // _bu, onBeforeUpdate this._bu && this._bu.forEach((cb) => cb()) } // Will template Mount the content to shadowRoot On render(template(), root) if (isMounted) { // _u,onUpdated this._u && this._u.forEach((cb) => cb()) } else { isMounted = true } }) } // Mount to for the first time dom Call back later ,onMounted connectedCallback() { this._m && this._m.forEach((cb) => cb()) } // Uninstall , onUnmounted disconnectedCallback() { this._um && this._um.forEach((cb) => cb()) } // Attribute listening attributeChangedCallback(name, oldValue, newValue) { this._props[name] = newValue } } ) } function createLifecycleMethod(name) { return (cb) => { if (currentInstance) { ;(currentInstance[name] || (currentInstance[name] = [])).push(cb) } } } export const onBeforeMount = createLifecycleMethod('_bm') export const onMounted = createLifecycleMethod('_m') export const onBeforeUpdate = createLifecycleMethod('_bu') export const onUpdated = createLifecycleMethod('_u') export const onUnmounted = createLifecycleMethod('_um') export * from 'https://unpkg.com/lit-html?module' export * from 'https://unpkg.com/@vue/reactivity/dist/reactivity.esm-browser.js' ``` [shallowReactive Source code ](https://github.com/vuejs/vue-next/blob/master/packages/reactivity/src/reactive.ts), Function annotations have made it clear ,only the root level properties are reactive. The object only responds to the root attribute , In other words , Shallow response , It's similar to a shallow copy . ```js /** * Return a shallowly-reactive copy of the original object, where only the root * level properties are reactive. It also does not auto-unwrap refs (even at the * root level). */ export function shallowReactive (target: T): T { return createReactiveObject( target, false, shallowReactiveHandlers, shallowCollectionHandlers ) } ``` [effect Source code ](https://github.com/vuejs/vue-next/blob/master/packages/reactivity/src/effect.ts), You can see roughly that there is dep Rely on , And oldValue、newValue Deal with . Through analysis ,vue-lit It's supposed to be vue3.0 And web components An attempt to do . use `lit-html` The reason is that the support template support is simple js Expression and event binding （ Native template At present, only slot slot ） #### css-doodle Actually , What I mentioned earlier css-doodle It's also a web component. It's a browser native support . Example ：[ Art background ](https://codepen.io/yuanchuan/pen/YRvMwK). ``` :doodle { @grid: 1x300 / 100vw 40vmin; overflow: hidden; background: linear-gradient(rgba(63, 81, 181, .11), #673AB7); } align-self: flex-end; --h: @r(10, 80, .1); @random(.1) { --h: @r(85, 102, .1) } @size: 1px calc(var(--h) * 1%); background: linear-gradient(transparent, rgba(255, 255, 255, .4), transparent); background-size: .5px 100%; transform-origin: center 100%; transform: translate(@r(-2vmin, 2vmin, .01), 10%) rotate(@r(-2deg, 2deg, .01)); :after { content: ''; position: absolute; top: 0; @size: calc(2px * var(--h)); transform: translateY(-50%) scale(.14); background: radial-gradient(@p(#ff03929e, #673ab752, #fffa) @r(40%), transparent 50%) 50% 50% / @r(100%) @lr() no-repeat; } ``` dom Structure ： #### input、select And so on html Elements input、select It's also web component. But it's built-in , Default can't see shadowRoot Structure , Need to open browser console settings , Tick `Show user agent shadow DOM`, In the console `elements` We can see its structure in . Set
dom Structure ## web components Componentization by 3 Part of it . - **Custom elements（ Custom elements ）**： A set of JavaScript API, Allows you to define custom elements And their behavior , You can then use them as needed in your user interface . - **Shadow DOM（ shadow DOM）**： A set of JavaScript API, Used to encapsulate “ shadow ”DOM Trees are attached to elements （ With the master file DOM Present separately ） And control its associated functions . In this way , You can keep the functionality of the element private , So they can be scripted and stylized , And don't worry about conflict with the rest of the file . - **HTML templates（HTML Templates ）**： `