1. Introduction

The word componentization should be heard by everyone’s ears. Under the leadership of the three big guys Vue React Angular, whether we finally bid farewell to the “componentization” era of pasting and copying

Antd ElementUi is a high-quality, out-of-the-box UI library that takes componentized development to the next level. Can you do what’s called componentization if you don’t compile or if you’re native? The W3C gave us a solution for Web Component

2. What is a Web Component

MDN document

As developers, we all know that it’s a good idea to reuse as much code as possible. This is often not so easy for custom tag structures-think of complex HTML (and associated styles and scripts), and sometimes you have to write code to render custom UI controls, and if you’re not careful, using them multiple times can make your page a mess.

Web Components aims to address these issues – it consists of four major technologies that can be used together to create custom elements that encapsulate functionality and can be reused anywhere you like without worrying about code conflicts.

The four core elements

  • Custom Elements: A set of JavaScript apis that allow you to define Custom Elements and their behavior, which can then be used as needed in your user interface.

  • Shadow DOM: A set of JavaScript apis for attaching an encapsulated “Shadow” DOM tree to an element (rendered separately from the main document DOM) and controlling its associated functionality. In this way, you can keep the functions of elements private so that they can be scripted and styled without fear of conflict with other parts of the document.

  • HTML Templates: the

  • HTML Imports: Once a custom component has been defined, the easiest way to reuse it is to keep its definition details in a separate file, and then use the import mechanism to import it into the pages where you want to actually use it. HTML imports are one such mechanism, although controversial – Mozilla fundamentally disagrees with this approach and intends to implement a more appropriate one in the future.

3. Shadow DOM

Browsers have many components built in for us, such as the most commonly used ones

Input,button,select, this is the most popular UI library compatible with the three frames 🙂

Take a range selection bar as an example

<input type="range"/>
Copy the code




So here’s the problem: the debugger shows only one element and where does it get its drag handle?

Settings => Elements => Show user Agent shadow DOM




And you can clearly see that there are some extra div elements that are hidden and that’s where the dots and the silders come from and that’s what’s called the shadow DOM,

Custom Elements Custom elements

So in a web page we can write some built-in markup, and they have built-in styles like padding,margin and so on

<div/>
<p/>
Copy the code

You can also write custom ones, such as

<lijinke>666</lijinke>
Copy the code

It still parses normally but without any style

4. Start writing a simple Web Component

With these two points in mind, we can start writing code. Let’s take a Card component as an example

4.1 First we define the DOM structure

  <template id="my-card-template">
    <div class="my-card">
      <div class="title">
        <slot name="title"</slot> </div> <pre> <slot name="content"</slot> </pre> </div> </template>Copy the code

Define a template template and define two slots to use as placeholules. This can be interpreted as meaning that values are replaced when the component is called

Save and refresh the page, and you’re done

Of course this is not possible and the next step is to use vue-loader

new Vue({
    el:"#my-card-template"
})
Copy the code

Well, that’s not possible. The page is blank

4.2 Next, use the interface provided by JStemplaterenders

First write a class

class MyCard extends HTMLElement { constructor(props) { super(); }}Copy the code

Step one: And then I’m going to take the contents of the template and notice that instead of innerHTML,

Step 2: Mount template to shadow DOM (default enabled)

If mode is set to false there will be no style

  class MyCard extends HTMLElement {
    constructor(props) {
      super(a);const {content:temp} = document.querySelector('#my-card-template')
      this.attachShadow({mode: 'open'}).appendChild(temp.cloneNode(true)); }}Copy the code
4.3 Registering a Custom Component
customElements.define('my-card',MyCard)
Copy the code

And then you can write it in HTML

  <my-card>
    <span slot="title"<p slot="content">
      const a = 1;
      console.log(a)
    </p>
  </my-card>
Copy the code

You can see that the elements in the template are now shadow DOM, implementing the same effects as shadow DOM, but without the styling




4.4 Writing component styles

Now I’m going to write a style and I’m going to write a simple style

  <template id="my-card-template">
    <style>
      .my-card {
        width: 300px;
        height: 300px;
        background: #fff;
        box-shadow: 1px 2px 10px rgba(0, 0, 0, .3);
        margin: 10px
      }
      .title {
        height:40px;
        background: #dcdcdc;
        line-height: 40px;
        text-align: center;
      }
      pre {
        padding: 20px;
      }
    </style>
    <div class="my-card">
      <div class="title">
        <slot name="title"</slot> </div> <pre> <slot name="content"</slot> </pre> </div> </template>Copy the code

Seriously like Vue’s three pieces of code haha.

4.5 Preview Effect




5. Conclusion

I also played the Web Component out of curiosity and found the API to be unstable and poorly compatible

For example, the method of importing components can be abolished at any time

<link type="import" href="./xx.html">
Copy the code

But this is really a new direction and new possibilities as the front end should be aware of, recently w3c introduced a lot of new things — custom variables, CSS version of canvas API, what I forgot, custom components, native module loading, front-end ecology is getting better and better, so

I’m still using React + node.js haha

In this paper, the DEMO

The resources

  • Developer.mozilla.org/zh-CN/docs/…