web Components

web Components是浏览器原生组件化，不需编译直接在浏览器中运行
css-doodle基于web Components封装的组件库
在html文件中通过<script></script>引入
css-doodle可以做炫酷的动画效果
花式组件库 fancy-components

css自定义属性加上--或@size

改变vue中原来的webpack属性，使fancy-components能够生效

将fc-开头的组件以原生的方式进行编译，在vue.config.js中

让vue支持jsx需要在babel.config.js额外添加配置插件
fancy-component与vue的语法较像

webComponent(is属性 slot)和Vue的关系

一个以vue为结尾的vue文件可以写代码直接变成html文件

html文件打开要想找到引入文件需要在http协议下，安装server

customElements函数传入的第二个参数类似于react中的类组件
html Imports（被遗弃） rel="import"<link rel="import" href="my-span-html"/>
html Modules （代替 html Imports）有一些浏览厂商不支持

customElements是windows下的一个属性.define方法中的第一个参数是名字需要有‘-’相连；还有.get方法
扩展fc-bubbles功能

css属性:not(:defined)伪类属性可用于设置一个加载动画
webComonents 的生命周期

customElements.define('life-style',class extends HTMLElement{
	static observedAttributes=['color']//要想属性变化，将变化的属性放在数组中，相当于vue中的data
	constructor(){
		super()
		//相当于Vue的setup
	}
	connectedCallback(){
		//相当于Vue的mounted
	}
	disconnectedCallback(){
	//相当于Vue中的unMounted
	}，
	adpotedCallback(){
	//剪切，然后在里面可以有自己的自定义逻辑,在使用诸如 document.adoptNode() 之类的方法将元素从一个 document 移动到另一个 document 时触发
	}，
	attributeChangedCallback(name, oldValue, newValue){
	//当 custom element 的一个属性被添加、移除或更改时调用。可以用于响应属性的变化，进行相应的更新，需要定义一个静态属性数组来使被检测的属性变化，相当于Vue的watch
	}


})

attribute（Html中的特性 id class） property（对象的属性{a:123}中的a）
以对象的方式显示DOM用console.dir
webCompoent不会自动更新视图
DOM.color='blue'这行代码不会导致DOM颜色的更新，如何做才能使DOM.color生效？
在类中添加对color的get和set

is.innerHTML/this.onclick/this.style方法，继承子类（HTMLElement）也可