通常都是通过JS创建Shadow DOM ,禁用JS或服务端渲染时Shadow DOM 不能正常解析,js加载延迟,shadow DOM 样式解析延迟,导致页面闪烁. 造成"无样式内容的闪现”(FOUC). 声明式shadowDOM由浏览器内核直接解析,方便SSR服务器渲染,有利于搜索引擎SEO.

阅读全文...

web components 自定义表单组件.

阅读全文...

web components 事件处理

阅读全文...

自定义组件样式web组件的css注意项.主要是 Shadow DOM的样式,和module中加载css. css in js.

阅读全文...

组件的生命周期constructor: 组件初始化时,被调用connectedCallback: 当 组件 首次被插入文档 DOM 时，被调用。disconnectedCallback:当 组件 从文档 DOM 中删除时，被调用。adoptedCallback:当 组件 被移动到新的文档时，被调用。attributeChangedCallback: 当 组件 增加、删除、修改自身属性时，被调用。

例有如下组件:

阅读全文...