个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
26
4
我有这个组件:
index.html
<html>
<head>
<title></title>
<meta charset="UTF-8">
<script src="clock.js"></script>
<style>
clock-digital div {
background-color: green;
}
</style>
</head>
<body>
<clock-digital></clock-digital>
</body>
</html>
时钟.js
customElements.define('clock-digital', class extends HTMLElement {
constructor() {
super();
var shadowRoot = this.attachShadow({
mode: 'open'
});
this._clockID = setInterval(function () {
var currentdate = new Date();
var hours = ( (currentdate.getHours() < 10) ? '0' : '') + currentdate.getHours();
var minutes = ( (currentdate.getMinutes() < 10) ? '0' : '') + currentdate.getMinutes();
var seconds = ( (currentdate.getSeconds() < 10) ? '0' : '') + currentdate.getSeconds();
shadowRoot.innerHTML = `
<style>
div {
display: inline-block;
width: 65px;
text-align: center;
background-color: whitesmoke;
font-style: italic;
border: 1px solid lightgray;
border-radius: 3px;
box-shadow: 2px 2px 3px;
}
</style>
<div>
${hours}:${minutes}:${seconds}
</div>`;
}, 500);
}
});
我希望组件的用户可以在时钟上定义他的样式。我试过:
<style>
clock-digital div {
background-color: green;
}
</style>
但它不起作用。我应该在 shadow root 的某个地方使用插槽标签吗？实现该目标的最佳做法是什么？
最佳答案
你可以公开 CSS properties在可以在外部设置的自定义元素中。
在您的示例中，您的元素可以定义 --clock-background-color，它设置 div 的背景颜色:
shadowRoot.innerHTML =
`<style>
div {
background-color: var(--clock-background-color, whitesmoke);
/* ... */
}
</style>
<div>
${hours}:${minutes}:${seconds}
</div>`;
然后，您的元素的用户可以通过以下方式将背景颜色更改为绿色:
<style>
clock-digital {
--clock-background-color: green;
}
</style>
<clock-digital></clock-digital>
请注意，Codepen 演示使用了适用于非 Chrome 浏览器的 Web Components polyfill，但您可以将其注释掉以查看它在 Chrome 中仍然正常工作。
关于javascript - vanilla JS webcomponent 的用户样式，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41449150/
26
4
0
我的 bower.json 中有这两个依赖项:Polymer/polymer#^2.6.0 和 webcomponents/webcomponentsjs#^v1.1.0。 在我的 index.htm
在我当前的项目中，我们正在根据 v1 规范构建 native Web 组件，我们目前正在webpack单个包 comp-webcomponents.js 中。 这是我们当前包的入口点文件: impor
我即将学习 vanilla js Web 组件。我可以成功渲染一些由网络组件生成的元素，现在我想给它一些设计并将其放在侧边栏中。但是我不确定这是网络组件还是只是设计问题，添加侧边栏后元素将不再显示。
来自链接qr-code.js我有下面的代码。 那我就不明白了，关于highlighted line (60) ，后缀:“已更改”是什么意思？ attributeChangedCallback: {
假设我们有一个自定义元素以这种方式使用: .... 其中list-image以 slider 方式显示img标签。如果组件的用户插入带有 的 img 标签 document.q
运行与webcomponents.js相关的dart应用程序时，控制台中出现异常 一切都按预期运行，我应该忽略此异常吗？ Failed to load resource: the server res
我正在尝试在我的项目中使用 PolymerElements，已导入所有库，但屏幕上没有任何内容(在 DOM 树的控制台中，所有元素都就位，因此它们目前不可见) . 你能告诉我我做错了什么吗？ 这是我的
我正在尝试使用 Dart 动态添加多个 div。 div 包含一个自定义 Web 组件，我正在尝试传入一个变量。我希望能够指定 n 个变量，将它们传递给 n 个组件，然后将它们插入到 HTML 文档中
我创建了一个 WebComponent，并在其中为它创建了一个构造函数。运行时，这个构造函数似乎没有被调用，虽然其余的组件可以工作，但它们必须在我的自定义构造函数之外创建。这是我正在谈论的一个例子。
假设我有以下 html: 现在，假设这被解析为 DocumentFragment。现在，我将片段插入到文档中。这些自定义元素的attachedCallback
我尝试制作一个简单的网络组件(使用 webcomponents.js v 0.7.23)。该组件有一个方法 (setTitre())。如果我在启动时在我的 HTML 页面中调用此方法，Chrome 是
我正在尝试按照 https://www.webcomponents.org/polyfills/ 中的说明填充 Web 组件因为我希望我的示例应用程序可以在 Chrome 和 Firefox 上运行。
我正在开发一个小部件库，这样客户只需在 中导入一个 javascript 文件他们的文件。加载该文件后，用户应该能够使用从头部加载的单个脚本加载的自定义元素。 问题是我需要使用 WebCompone
在 MDN 文档中，我看到 WebComponents 可以实现的一个函数叫做 adoptedCallback。 MDN 文档指出: “当自定义元素移动到新文档时调用。” https://develo
在我的 index.html 中，我导入了一个带有模板、Shadow DOM 等的外部 HTML 文件。一个自定义 Web 组件。 //索引.html ... ... 和另一个文件 user
我正在尝试使用 :host 选择器在 WebComponent 中设置 width 和 height，但大小没有改变。这是组件的模板: :host { width: 100
我正在使用 vue.js 并使用 stencil.js 创建了一个网络组件。我不想将 webcomponent 发布到 npm，这就是为什么我只是将它包含在我的 vue 项目中的 src/assets
尝试使用 webcomponents 但遇到了一个我没有得到的错误。 标记很简单，应该可以工作。 2个文件，都是html文件。 错误标记在 上在控制台中标记。 感谢您的帮助。 附言。我正在运行 Go
我要create a custom tag with Kotlin包含默认内容。链接的示例工作正常，但我没有设法将一些默认内容(例如输入元素)添加到自定义标签。 我尝试了不同的方法，但到目前为止，我只
我正在尝试将我的 vue2 webcomponent 迁移到 vue3，但在我为生产创建构建时出现了问题。 我使用带有 --target wc 的 vue-cli 现在显示一条错误，指出 vue3 w
我是一名优秀的程序员,十分优秀！