Web组件（Web Components）的主要目的之一是提供封装——能够隐藏HTML标记结构和CSS样式，并与页面上的其他代码分离，这样不同的部分就不会冲突，通过这种方式，这样代码就可以保持漂亮和干净。
影子DOM（Shadow DOM）为我们提供了范围限定的样式封装，并提供了一种让我们随意选择进入（尽可能少）外界的方法。
但是，如果我想使我的组件可自定义某些样式属性，该怎么办？
本文介绍了使用CSS自定义属性穿透Shadow DOM并使你的Web组件可自定义的基础知识。
创建一个HTML元素
我们将使用扩展基本HTML Element的JavaScript类创建自定义HTML元素。然后，我们将使用要创建的标签名称和刚刚创建的类调用customElements.define()。
class AppCard extends HTMLElement {...}
window.customElements.define('app-card', AppCard);
在此示例中，我们将创建此简单的Material Design卡片，当我们在HTML上添加此元素时将显示该元素：<app-card> </ app-card>。
首先，我们创建Shadow DOM root，然后将HTML和CSS字符串分配给Shadow DOM root 的 innerHTML，如下所示。
class AppCard extends HTMLElement {
constructor() {
super();
const shadowRoot = this.attachShadow({mode: 'open'});
shadowRoot.innerHTML = `
<style>
.card {
background-color: #fff;
...
}
</style>
<div class="card">
<div>Card title</div>
</div>
`;
}
}
window.customElements.define('app-card', AppCard);
覆盖尝试
在此示例中，我们要修改卡的背景颜色。如果它是HTML中的简单 div 元素，则可以覆盖 card 类或通过CSS选择器访问 div 元素。但是，以下尝试将无效：
// access the div
app-card > div {
background-color: #2196F3;
}
// override card class
app-card > .card {
background-color: #2196F3;
}
使用CSS自定义属性
为了解决这个问题，我们可以使用CSS自定义属性（CSS变量）。可以使用CSS中定义的CSS自定义属性来更改自定义元素中的某些CSS属性。
按照我们的例子，我们将使用属性 background-color 上的变量 card-bg 来获取谁在使用自定义元素所定义的颜色。
class AppCard extends HTMLElement {
constructor() {
super();
const shadowRoot = this.attachShadow({mode: 'open'});
shadowRoot.innerHTML = `
<style>
.card {
background-color: var(--card-bg, #fff);
...
}
</style>
<div class="card">
<div>Card title</div>
</div>
`;
}
}
window.customElements.define('app-card', AppCard);
现在，我们将使用 app-card 自定义元素，并在Body元素的CSS中创建 card-bg 变量，我们将十六进制颜色 #2196F3 分配给变量。
<html>
<head>
<style>
body {
--card-bg: #2196F3;
}
</style>
</head>
<body>
<app-card></app-card>
</body>
</html>
总结
使用这种策略，我们可以在你的文档中拥有一个封装的CSS元素，同时我们可以允许使用CSS对一些属性进行自定义。你可以在这里访问一个完整的例子。
原文：levelup.gitconnected.com
作者：Cesar William Alvarenga
常见问题FAQ
- 免费下载或者VIP会员专享资源能否直接商用？
- 本站所有资源版权均属于原作者所有，这里所提供资源均只能用于参考学习用，请勿直接商用。若由于商用引起版权纠纷，一切责任均由使用者承担。更多说明请参考 VIP介绍。
- 提示下载完但解压或打开不了？
- 找不到素材资源介绍文章里的示例图片？
- 模板不会安装或需要功能定制以及二次开发？
发表评论
还没有评论，快来抢沙发吧！