如何确保 CSS 类样式在自定义 HTML 元素上呈现？

发布于 2025-01-09 07:28:01 字数 1342 浏览 1 评论 0原文

刚开始使用自定义 HTML 元素。我的类样式不适用于页面渲染，尽管它显示在 DOM 中。唯一的线索是它出现在检查器中打开的 Shadow DOM 而不是常规 DOM 中，如果它会导致 CSS 问题，这似乎是不可取的。

请注意，本例中所讨论的类样式称为“border-all”。我尝试过三种现代浏览器。无边框显示

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <title>My Test</title>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="styles.css" >
    <script src="header.js"></script>
</head>
<body>
    <header-component></header-component>
</body>
</html>

header.js

class Header extends HTMLElement {
  constructor() {
    super();
    const template = document.createElement('template');
    const h1 = document.createElement('h1')
    h1.innerHTML = 'Hello World'
    h1.style.color = 'green'
    h1.className = 'border-all'
    template.content.appendChild(h1)
    const shadowRoot = this.attachShadow({ mode: 'open' });
    shadowRoot.appendChild(template.content);
  }
}

customElements.define('header-component', Header);

原文

New to using custom HTML elements. My class style is not applying to the page render, though it shows in the DOM. The only clue is that it appears in the inspector within the open Shadow DOM rather than the regular DOM, which seems undesirable if it causes CSS issues.

Note the class style in question in this example is called 'border-all'. I have tried three modern browsers. No border displays

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <title>My Test</title>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="styles.css" >
    <script src="header.js"></script>
</head>
<body>
    <header-component></header-component>
</body>
</html>

header.js

class Header extends HTMLElement {
  constructor() {
    super();
    const template = document.createElement('template');
    const h1 = document.createElement('h1')
    h1.innerHTML = 'Hello World'
    h1.style.color = 'green'
    h1.className = 'border-all'
    template.content.appendChild(h1)
    const shadowRoot = this.attachShadow({ mode: 'open' });
    shadowRoot.appendChild(template.content);
  }
}

customElements.define('header-component', Header);

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

星光不落少年眉 2025-01-16 07:28:01

https://developers.google.com/web/fundamentals/web-components/ Shadowdom

ShadowDOM 的样式如下：

shadowDOM 内的
可继承样式
https://lamplightdev.com /blog/2019/03/26/why-is-my-web-component-inheriting-styles/
（级联）CSS 属性
shadowParts（和主题）
https://meowni.ca/posts/part-theme-explainer/< /p>
< p> 被反映，它们不是由 ShadowDOM 设计样式，而是由其容器设计。
请参阅：::分槽内容
（2022 年 2 月）可构造样式表仍然是仅限 Chromium 的一方
https://caniuse.com/mdn-api_cssstylesheet_cssstylesheet

customElements.define("my-component",class extends HTMLElement{
  constructor(){
    super().attachShadow({mode:"open"})
           .innerHTML = `
           <style>
             :host { display:inline-block; padding-left:2em }
             h2 { margin:0 }
             span {
                    color: var(--spancolor,grey);
           </style>
           <h2 part="wcTitle">Hello Web Component!</h2>
           <span>styling shadowDOM can be a challenge</span>
           <slot></slot>`;
  }
})

<style>
  body {
    font:18px Arial; /* inheritable styles style Web Components */
    color:green; /* color is an inheritable style */
    --spancolor: lightcoral; /* css properties cascade, and are available in Web Components */
  }
  div ::part(wcTitle){ /* ::parts style ALL (nested) elements in shadowDOM */
    background:gold;
  }
  my-component{
    font-weight: bold; /* slotted content is styled by the container */
  }
   my-component my-component{
    color:blue;
  }
</style>

<my-component>But is very powerfull!</my-component>
<div>
  <my-component>You should never give up!
    <my-component>Those who quit after the first attempt are loosers</my-component>
  </my-component>
</div>

https://developers.google.com/web/fundamentals/web-components/shadowdom

ShadowDOM is styled by:

<style> within shadowDOM
Inheritable styles
https://lamplightdev.com/blog/2019/03/26/why-is-my-web-component-inheriting-styles/
(cascading) CSS properties
shadowParts (and Themes)
https://meowni.ca/posts/part-theme-explainer/
<slot> are reflected, they are NOT styled by the shadowDOM, but by its container.
See: ::slotted content
(feb 2022) Constructible StyleSheets is still a Chromium only party
https://caniuse.com/mdn-api_cssstylesheet_cssstylesheet

customElements.define("my-component",class extends HTMLElement{
  constructor(){
    super().attachShadow({mode:"open"})
           .innerHTML = `
           <style>
             :host { display:inline-block; padding-left:2em }
             h2 { margin:0 }
             span {
                    color: var(--spancolor,grey);
           </style>
           <h2 part="wcTitle">Hello Web Component!</h2>
           <span>styling shadowDOM can be a challenge</span>
           <slot></slot>`;
  }
})

<style>
  body {
    font:18px Arial; /* inheritable styles style Web Components */
    color:green; /* color is an inheritable style */
    --spancolor: lightcoral; /* css properties cascade, and are available in Web Components */
  }
  div ::part(wcTitle){ /* ::parts style ALL (nested) elements in shadowDOM */
    background:gold;
  }
  my-component{
    font-weight: bold; /* slotted content is styled by the container */
  }
   my-component my-component{
    color:blue;
  }
</style>

<my-component>But is very powerfull!</my-component>
<div>
  <my-component>You should never give up!
    <my-component>Those who quit after the first attempt are loosers</my-component>
  </my-component>
</div>

回复收藏 0 原文

悲喜皆因你 2025-01-16 07:28:01

一种方法是使用 Element.classList property

您可以：

document.querySelector('h1').classList.add('border-all');

我将在 CodePen 中给您留下一个工作示例，唯一的区别是该元素已经具有 id 和我们使用
document.getElementById
而不是
document.querySelector

但这就是区别，我希望这可以帮助您更好地理解！

https://codepen.io/Jeysoon/pen/NWwzEJG?editors=1111

One way of doing this is to use the Element.classList property

You can just:

document.querySelector('h1').classList.add('border-all');

I will leave you below a working example in CodePen, the only difference is that the element already have and id and we use
document.getElementById
instead of
document.querySelector

But thats pretty much the difference, I hope this helps you understand better!

https://codepen.io/Jeysoon/pen/NWwzEJG?editors=1111

回复收藏 0 原文

~没有更多了~