设置Shape Dom::Part元素的子元素样式

Style children of shadow dom ::part element(设置Shape Dom::Part元素的子元素样式)
本文介绍了设置Shape Dom::Part元素的子元素样式的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我有一个Web组件,它在阴影DOM中呈现以下内容:

<custom-banner>
  #shadow-root
    <div part="headertext">
      I am the header text!
    </div>
    ...
</custom-banner>

要设置headertext的样式,下面的css效果很好:

custom-banner::part(headertext) {
  border: 5px solid green;
}

现在假设我有这样的东西:

<custom-banner>
  #shadow-root
    <div part="headertext">
      I am the header text!
      <span>I am the subheader text!</span>
    </div>
    ...
</custom-banner>

是否有方法以影子部件的子项为目标?也就是说,如下所示(似乎不起作用):

custom-banner::part(headertext) span {
  border: 5px solid red;
}

我意识到这类事情可能会削弱::part的整个目的,但可能不会?

明确地说,在本例中,副标题范围是而不是一个带槽的子项。它始终是组件的一部分,并且在影子DOM中。以上示例用于在浏览器中呈现组件。

谢谢!

推荐答案

唉,只能::part节点本身

不是儿童,这将违背::part的目的
那么不妨允许所有shadowDOM样式从外部开始。(无法完成)

如果不想指定part="subheader", 您可以使用范围部分的css属性,请参阅--subheader: blue

好博客:

  • Why is my shadowDOM inheriting styles
  • ::partsMonica Dinculescu(Google):https://meowni.ca/posts/part-theme-explainer/
数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假">
<style>
  body {
    /* note how 'inheritable styles' do style shadowDOM */
    font: 28px Arial;
    color: green;
  }
  custom-banner::part(headertext) {
    /* style shadowDOM from global CSS */
    background: pink;
    --subheader: blue;
  }
</style>

<custom-banner></custom-banner>

<script>
  customElements.define("custom-banner", class extends HTMLElement {
    constructor() {
      super()
        .attachShadow({mode:"open"})
        .innerHTML = `<style> span {  color:var(--subheader)  } </style>` +
                     `<div part="headertext">I am the header text!` +
                        `<span>I am the subheader text!</span>` +
                     `</div>`;
    }
  });
</script>

这篇关于设置Shape Dom::Part元素的子元素样式的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!

本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除!

相关文档推荐

在小程序端input为number类型的表单,调出的键盘只有数字且没有小数点和负号。显然并不符合要求。所以我们用text类型来自己判断 1,必须为数字 2,第一位不是小数点,且只能出现一个小数点 3,负号只能出现在第一位,且只能出现一次 4,如果
layui表格:设置表头居中,内容居左的实例代码:表头在属性中控制,内容直接用css样式控制 { field: 'Result', title: '结果', align: 'center', width: '60%', templet: function (d) { return 'div style="text-align:left"' + d.Result + '/div' }},
p您的性别:/p div class="radio-sex" input type="radio" id="sex1" name="sex" label for="sex1"/label span男/span /div div class="radio-sex" input type="radio" id="sex2" name="sex" label for="sex2"/label 女 /divstyle.radio-sex { position: relative; display: inline-
h2Cars Select/h2div class="select"select name="cars"option value="volvo"Volvo/optionoption value="saab"Saab/optionoption value="opel" selectedOpel/optionoption value="audi"Audi/option/select/divstylebody {font-size: 20px;color: #090;background-color: #eee
p5.js WebGL 3d graphics covered by 2d background when rotated(P5.js旋转时被2D背景覆盖的WebGL 3D图形)
Static vector field with classic arrows at every point on p5.js(P5.js上每个点都有经典箭头的静态向量场)