Question

我正在使用litelement创建一个简单的自定义元素。该元素将通过插槽获取各种输入。此时，我什至没有使用命名槽。

我无法将样式应用于嵌套在广告位中的元素。例如，在此代码段https://codepen.io/aver-mimas/pen/qePZXY中，我正在使用此元素的3种不同变体，如下所示：

<content-card>
  <p>This is a paragraph</p>
</content-card>

<content-card heading="Card2 title" background="grey">
    <p>Content of Card 2</p>
    <a href="#">Terms of Use</a>
    <p>There's more</p>
</content-card>

<content-card heading="Another card with long title & content" background="dark">
  <p>Content of card3. <a href="#">Policy</a></p>

  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi nesciunt cupiditate, nam vel ad sit maxime soluta? Molestias accusamus cupiditate, dolor corrupti id pariatur laudantium velit. Odio temporibus nesciunt officiis!</p>
</content-card>

我似乎无法将背景/颜色样式应用于最后一个自定义元素中的<a>元素。如果它不像第二个<content-card>中那样嵌套，那就没关系。

我缺少什么，以便无论自定义元素的位置在<a>元素中如何应用相同的样式？

Answer 1

char const*仅适用于@ControllerAdvice("com.main.abc.package") public class AdapterAdvice implements ResponseBodyAdvice<Object> { @Override public boolean supports(MethodParameter methodParameter, Class<? extends HttpMessageConverter<?>> aClass) { return true; } @Override public Object beforeBodyWrite( Object body, MethodParameter methodParameter, MediaType mediaType, Class<? extends HttpMessageConverter<?>> aClass, ServerHttpRequest serverHttpRequest, ServerHttpResponse serverHttpResponse) { Map<String, Object> data = new HashMap<>(); data.put("serverTime", new Date(System.currentTimeMillis())); if(body instanceof Map && ((Map)body).get("error") != null ){ data.put("isSuccess", false); if(((Map)body).get("trace") != null){ ((Map)body).remove("trace"); } } else if (body instanceof ApiError && ((ApiError)body).getResponseStatusCode().equalsIgnoreCase("0")){ data.put("isSuccess", false); } else { data.put("isSuccess", true); } data.put("mainResponse",body); return data; } }中分配的顶级元素。

因此，您不能使用它来设置嵌套元素的样式。在您的情况下，::slotted()样式将是主文档中定义的样式（因为<slot>在轻型DOM中，因此它是从全局CSS样式继承的。）

然后的解决方案是在主文档中为<a>定义CSS。您可以将其插入<a>元素中，也可以插入轻型DOM级别。要将特定样式限制为“自定义元素”内容，请在其前面添加名称：

<a>

<head>

<style>
    custom-card a {
        color: white;
        background-color: red;
    }
</style>

litelement-在插槽元素中设置嵌套元素的样式

1 个答案: