Web Components

Web Components
Introduce
Google has mastered Chrome browser , So we have been promoting the native components of browsers , That is to say Web Components API
Compared with third-party frameworks , Native components are simple and straightforward , No external modules are loaded , Small amount of code
Allows you to create reusable custom elements , And in our web Use them directly in applications
Core technology composition
Custom elements Custom elements
A group of JavaScript API, Allow definition of custom elements And their behavior , Then use them as needed in the user interface
Shadow DOM shadow DOM
A group of JavaScript API, Used to encapsulate the shadow DOM Trees are attached to elements ( With the main document DOM Present separately ), And control its associated functions
In this way , We can keep the function of elements private , So they can be scripted and stylized , Don't worry about conflicts with other parts of the document
HTML template html Templates
And elements allow you to write markup templates that are not displayed in rendering pages , Then they can be reused many times as the basis for a custom element structure
Life cycle function
connectedCallback
When a custom element is first connected to a document DOM When called
disconnectedCallback
When custom elements and documents DOM Called when disconnected
adoptedCallback
Called when a custom element is moved to a new document
attributeChangedCallback
When the first attribute of the custom element is added 、 Called when removed or changed
Instance development
example 1： The date of the component
01.png
Directory structure

|-scripts

|–date.time.js

|-index.html
Development date component

(() => {

// Create a template

const template = document.createElement(‘template’)

// The tag element contains the specific styles and DOM

template.innerHTML = `



















`

// Create custom datetime Component class DateTime, As long as inherit HTMLElement Class can write custom tags / Elements

class DateTime extends HTMLElement {

/**

* constructor Life cycle function

* @description Element creates , But not added to the page

* @description Generally speaking, it needs to be in constructor Create initialization state in , Event monitoring and shadow creation DOM

*/

constructor () {

// call super Method , You need to use it to call the parent constructor

super()

/**

* attachShadow shadow DOM

* @param open Allow access to

* @param closed Close the external access

*/

this.attachShadow({ mode: ‘open’ })

/**

* shadowRoot shadow DOM The root node

* @description template.content Is a free document fragment

* @description cloneNode(params) params -> boolean [true|false]

* true -> Deep traversal cloning

*/

this.shadowRoot.appendChild(template.content.cloneNode(true))

}

// Initialization time

initDateTime () {

// Get the current time object

let date = new Date()

// Create an English month enumeration array

let month = [‘January’, ‘February’, ‘March’, ‘April’, ‘May’, ‘June’, ‘July’, ‘August’, ‘September’, ‘October’, ‘November’, ‘December’]

// The year, month, and day that the packaging configuration needs to be used

let dateConfig = {

date: date.getDate() >= 10 ? date.getDate() : ‘0’ + date.getDate(),

month: month[date.getMonth()],

year: date.getFullYear()

}

// console.log(dateConfig)

// datetime Content rendering display

this.shadowRoot.querySelector(‘.datetime-box__wrap–day’).innerText = dateConfig.date

this.shadowRoot.querySelector(‘.datetime-box__wrap–month’).innerText = dateConfig.month

this.shadowRoot.querySelector(‘.datetime-box__wrap–year’).innerText = dateConfig.year

}

/**

* connectedCallback Life cycle function

* @description When a custom element is first connected to a document DOM When called

* @description Element inserted DOM When it comes to execution , Generally speaking, it is used to obtain data , Set the default display style or content

*/

connectedCallback () {

this.initDateTime()

}

}

/**

* Global registration component

* @description Mount the component class to DOM Up , Custom tag names use our components

*/

window.customElements.define(‘date-time’, DateTime)

})()
Page references

example 2： list ( details ) Components
02.png
Directory structure

|-images

|-scripts

|–article-info.js

|–article-info-detail.js

|–article-data.js

|–script.js

|-index.html
html structure





 





 

data structure  let cardData = [  {  id: "1",  title: 'ndjscnsdcnksdc',  theme: 'Animal',  cover: './images/banner1.jpg',  avatar: './images/default.jpg',  author: 'Jerry',  comments: '1000',  likes: '4339',  shares: '400',  p: 'cnjdncsdkldsnmclkdmcl;sdmc;ldsc;lsdml;csd'  },  {  id: "2",  title: 'ndjscnsdcnksdc',  theme: 'cinms',  cover: './images/banner2.jpg',  avatar: './images/5.jpg',  author: 'Tom',  comments: '500',  likes: '432',  shares: '283',  p: 'skdnckcnlsdcdmcl;sdmcl;dmsclmdl;mocpmspodmcposdmcpo'  },  {  id: "3",  title: 'ndjscnsdcnksdc',  theme: 'Animal',  cover: './images/banner1.jpg',  avatar: './images/default.jpg',  author: 'hbbgf',  comments: '1000',  likes: '4339',  shares: '400',  p: 'dccfssssssssssssssssssdsvervesvf'  },  {  id: "4",  title: 'ndjscnsdcnksdc',  theme: 'cinms',  cover: './images/banner2.jpg',  avatar: './images/5.jpg',  author: 'cdsc',  comments: '500',  likes: '432',  shares: '283',  p: 'cdfcmlkfdnvkfdmvlsmvl;smvl;sml;sml;sdml'  }  ] style  .container-detail-wrap {  transition: .5s ease;  width: 100%;  height: 100vh;  overflow-x: hidden;  overflow-y: auto;  position: fixed;  left: 100%; // *  opacity: 0; // *  top: 0;  z-index: 3;  background-color: #fff;  } Develop list components  // article-info.js  (() => {  const template = document.createElement('template')  template.innerHTML = ` 



  

 



   Comment  







• 
• 
• *
• 












`

class ArticleInfo extends HTMLElement {

constructor () {

super()

this.attachShadow({ mode: ‘open’ })

this.shadowRoot.appendChild(template.content.cloneNode(true))

this.initEvent()

}

/**

* Initialize event

* @description Use CustomEvent Define custom events

*/

initEvent () {

const cardInfo = this.$(‘.card-info’)

cardInfo.addEventListener(‘click’, (ev) => {

let myEventInfo = new CustomEvent(‘card-click’, {

composed: true,

bubbles: true

})

this.dispatchEvent(myEventInfo)

})

}

$(selector) {

return this.shadowRoot.querySelector(selector)

}

initRender () {

this.KaTeX parse error: Expected group after '_' at position 13: ('.card-info_̲_cover--image')…(‘.card-info__cover–title’).innerText = this.getAttribute(‘theme’)

this.KaTeX parse error: Expected group after '_' at position 13: ('.card-info_̲_avatar').src =…(‘.card-info__author’).innerText = this.getAttribute(‘author’)

this.$(‘.card-info__title’).innerText = this.getAttribute(‘title’)

}

connectedCallback () {

this.initRender()

}

}

window.customElements.define(‘arcitle-info’, ArticleInfo)

})()
Develop detail components

(() => {

const template = document.createElement(‘template’)

template.innerHTML =  <img class="cover" src=""/>  <span class="theme"></span>  <img class="avatar" src=""/>  <span class="author"></span>  <span class="title"></span>  <span class="comments"></span>  <span class="likes"></span>  <span class="shares"></span>  <p class="p"></p>  <button class="back">Back</button> 

class ArticleInfoDetail extends HTMLElement {

constructor () {

super()

this.attachShadow({ mode: ‘open’ })

this.shadowRoot.appendChild(template.content.cloneNode(true))

this.initEvent()

}

initEvent () {

const backBtn = this.$(‘.back’)

backBtn.addEventListener(‘click’, (ev) => {

let myEvent = new CustomEvent(‘card-back-click’, {

composed: true,

bubbles: true

})

this.dispatchEvent(myEvent)

})

}

$(selector) {

return this.shadowRoot.querySelector(selector)

}

initRender () {

this.${(}^{\prime }.cove{r}^{\prime }).src=this.getAttribute{(}^{\prime }cove{r}^{\prime })this.$(‘.theme’).innerText = this.getAttribute(‘theme’)

this.${(}^{\prime }.avata{r}^{\prime }).src=this.getAttribute{(}^{\prime }avata{r}^{\prime })this.$(‘.author’).innerText = this.getAttribute(‘author’)

this.${(}^{\prime }.titl{e}^{\prime }).innerText=this.getAttribute{(}^{\prime }titl{e}^{\prime })this.$(‘.comments’).innerText = this.getAttribute(‘comments’)

this.${(}^{\prime }.like{s}^{\prime }).innerText=this.getAttribute{(}^{\prime }like{s}^{\prime })this.$(‘.shares’).innerText = this.getAttribute(‘shares’)

this.$(‘.p’).innerText = this.getAttribute(‘p’)

}

connectedCallback () {

this.initRender()

}

/**

* attributeChangedCallback Life cycle function

* @param name

* @param oldValue

* @param newValue

* @description When the first attribute of the custom element is added 、 Called when removed or changed

*/

attributeChangedCallback (name, oldValue, newValue) {

// console.log(name, oldValue, newValue)

this.initRender()

}

// Changes in listening properties - The property value corresponding to each returned property name changes , Will trigger the corresponding attributeChangedCallback Method

static get observedAttributes () {

return [‘id’, ‘cover’, ‘theme’, ‘avatar’, ‘author’, ‘title’, ‘comments’, ‘likes’, ‘shares’, ‘p’]

}

}

window.customElements.define(‘arcitle-info-detail’, ArticleInfoDetail)

})()
scripts.js

(() => {

let container = document.querySelector(‘.container’)

let str = ‘’

// Traverse to get all the article information

cardData.forEach(item => {

str +=  <arcitle-info  id="${item.id}"  cover="${item.cover}"  theme="${item.theme}"  avatar="${item.avatar}"  author="${item.author}"  title="${item.title}">  <span slot="comments">${item.comments}</span>  <span slot="likes">${item.likes}</span>  <span slot="shares">${item.shares}</span>  </arcitle-info> 

})

// append To container in

container.innerHTML = str

document.body.addEventListener(‘card-click’, (ev) => {

let id = ev.target.id

let detailWrap = document.querySelector(‘.container-detail-wrap’)

let cardDetail = document.querySelector(‘arcitle-info-detail’)

// get arcitle data from id

let articleSelectData = cardData.filter(v => v.id === id)[0]

Object.keys(articleSelectData).forEach(key => {

cardDetail.setAttribute(key, articleSelectData[key])

})

// The animation shows the article details page

detailWrap.style.left = 0;

detailWrap.style.opacity = 1;

})

document.body.addEventListener(‘card-back-click’, (ev) => {

let detailWrap = document.querySelector(‘.container-detail-wrap’)

// The animation shows the article details page

detailWrap.style.left = ‘100%’;

detailWrap.style.opacity = 0;

})

})()