快乐的时光都是这么短暂,转眼间,web原生组件的知识点已经学完了,这个虽然暂时不一定有用,但是随着时间的积累,一步一个脚印的积累,你会有相应的收获,希望能变得更强,比如两年前我也会想有现成的东西不用,干嘛要自己写呢?但是你确定一直用上层的东西,你的收获有自己写快吗? 在开发的过程过能节约下来的时间,我们可以用这个时间拿来学习,这样随着时间的积累我们会变得更强,也会慢慢有更多的时间投入生活,进行正向循环
css问题自定义元素然后是普通的HTML元素,也可以使用css设置样式
在我们没有设置shadow DOM的组件,进行全局样式设置
<app-element></app-element> <style> /* CSS Global */ app-element { display: inline-block; padding: 6px 20px; background: steelblue; color: white; } app-element span { font-weight: bold; vertical-align: super; font-size: small; color: gold; } </style> <script> customElements.define("app-element", class extends HTMLElement { connectedCallback() { this.innerHTML = `<div>AppElement <span>New!</span></div>`; } }); </script>无论文档是否具有Shadow DOM，都可以从文档的全局CSS（从组件外部）对组件本身进行样式设置。
只要没有Shadow DOM可以“保护”组件，就可以对组件中的元素进行全局样式设置
HTML 外部引入 <app-element></app-element> <script> customElements.define("app-element", class extends HTMLElement { connectedCallback() { this.innerHTML = ` <link href="http://www.likecs.com/components/AppElement.css"> <style> @import "http://www.likecs.com/components/AppElement.css"; </style> <div> AppElement <span>New!</span> </div> `; } }); </script> 程序化动态的方法 <app-element></app-element> <script> import css from "./AppElement.css"; customElements.define("app-element", class extends HTMLElement { connectedCallback() { document.adoptedStyleSheets = [...document.adoptedStyleSheets, css]; this.innerHTML = ` <div> AppElement <span>New!</span> </div> `; } }); </script> this.shadowRoot.adoptedStyleSheets = [...document.adoptedStyleSheets, css];我们通过import 加载css,在这种情况下,它是组件的相对路径,在加载css内容中并生成一个对象cssStyleSheet ,然后通过.adoptedStyleSheets 导入css
这种方法直接使用是错误的,需要引入插件css-loader,应该要借助webpack ,原生不能直接使用
import css from "./AppElement.css"
css自定义属性 var(--color,red) // 第一个变量不存在,用第二个全局设置,穿透到里面
<app-element></app-element> <app-element></app-element> <app-element></app-element> <style> /* CSS Global */ app-element:first-of-type { --color: orangered; } </style> <script> customElements.define("app-element", class extends HTMLElement { connectedCallback() { this.innerHTML = ` <style> /* CSS Local */ .element { display: inline-block; padding: 6px 20px; background: var(--color, steelblue); color: white; } span { font-weight: bold; vertical-align: super; font-size: small; color: gold; } </style> <div> AppElement <span>New!</span> </div> `; } }); </script> css 作用域css 伪类,仅在定义了shadow DOM 有效
伪类 描述:host 它允许我们设置自定义元素（组件自己的容器）的样式。
:host(``css) 同上一个，但前提是它与中定义的选择器匹配css。
:host-context(``css) 同上，但前提是您有与选择器匹配的父母css。
<app-element></app-element> <app-element disabled></app-element> <div> <app-element></app-element> </div> <script> customElements.define("app-element", class extends HTMLElement { constructor() { super(); this.attachShadow({ mode: "open" }); } connectedCallback() { this.shadowRoot.innerHTML = ` <style> :host { display: inline-block; padding: 6px 20px; background: steelblue; color: white; } :host([disabled]) { background: #aaa; } :host-context(.box) { background: red; } span { font-weight: bold; vertical-align: super; font-size: small; color: gold; } </style> <div> AppElement <span>New!</span> </div> `; } }); </script>
修改最外层的盒子的css
影子DOM操作事件 <app-element></app-element> <script> customElements.define("app-element", class AppElement extends HTMLElement { constructor() { super(); this.attachShadow({ mode: "open" }); } sendMessage() { alert("Hello!"); } connectedCallback() { this.shadowRoot.innerHTML = "<button>点我!</button>"; this.button = this.shadowRoot.querySelector("button"); this.button.addEventListener("click", () => this.sendMessage()); } // 离开页面删除事件 disconnectedCallback() { this.button.removeEventListener("click", () => this.sendMessage()); } }); </script>第二种方法
不用addEventListener
this.button.onclick=()=>this.sendMessage() // 离开页面删除事件 disconnectedCallback() { this.button.onclick=null; }第三种方法