html自定义元素使主机css改为应用于影子dom子级

Question

所以，我目前正在处理一个自定义元素，我希望以后可以像普通的html元素一样使用CSS设置样式。但是，按照我的元素设置方式，某些css样式（例如padding）在应用于元素本身时会破坏该元素-而是需要将其应用于自定义元素的阴影dom内的某个元素才能起作用。所以我的问题是：如何使自定义元素上的用户定义CSS应用于其影子dom中的元素？

为了说明这一点，说在下面的代码中使用了custom元素：

<my-element style="padding:10px">Content here</my-element>

通常，使用我使用的影子dom会导致以下扁平的dom树：

<my-element style="padding:10px">
    <div>
        Content here
    </div>
    Some other elements here
</my-element>

但是我希望扁平化的dom树看起来像这样：

<my-element>
    <div style="padding:10px">
        Content here
    </div>
    Some other elements here
</my-element>

我已经尝试了许多解决方案，但是到目前为止，没有一个对我有用：

• 将padding:inherit应用于内部元素-仅当我也将填充保留在父元素上时，此方法才有效，但我需要将其设置为0（或以某种方式使子元素忽略父填充，同时仍处于相对位置，但是我认为这不可能）
• 使用css变量--padding设置内部元素的填充-从技术上讲是可行的，但是这将要求自定义元素的用户指定--padding而不是仅指定padding，从而使元素不太美观使用
• 使用脚本侦听填充的更改-据我所知，当元素的计算样式更改时，没有办法得到通知，因此我必须定期检查以确保此功能正常运行，这可能会减慢速度在页面上。例如，如果加载了一个影响自定义元素填充的新css表，则仅侦听element.style的更改将不起作用。

所以，我目前正在处理一个自定义元素，我希望以后可以像普通的html元素一样使用CSS设置样式。但是，设置元素的方式是一些CSS样式，例如padding ...

Answer 1

您可以定义自定义属性。这是一个基本示例

Answer 2

非常简单。