问题
I would like to adapt a combo box component's CSS. The combo box has my style class custom1
added which should disable border radius for left corners.
In my shared-styles.html, I tried to adapt CSS properties:
.custom1 {
--lumo-border-radius: 0px;
}
This is changing the styles but it is not exactly what I want. According to docs, I should follow this wiki to apply local scope styles for the web component. So, I tried:
<custom-style>
<style>
...
</style>
</custom-style>
<dom-module id="my-combo-box-theme" theme-for="vaadin-combo-box">
<template>
<style include="vaadin-combo-box-default-theme">
:host(.custom1) [part="input-field"] {
border-top-left-radius: 0px;
border-bottom-left-radius: 0px;
}
</style>
</template>
</dom-module>
However, it didn't work and the part input-field
is located like that:
<vaadin-combo-box>
<vaadin-text-field>
...
<div part="input-field">
...
</div>
...
</vaadin-text-field>
</vaadin-combo-box>
Which is a problem I guess, because it is a shadow DOM under a shadow DOM? How can I style that part?
回答1:
You need a style/theme module for vaadin-text-field
which exposes a new custom property for border-radius
, which you can then adjust from the style/theme module for vaadin-combo-box
.
Here’s a similar answer on the Vaadin Forum (for text-align
): https://vaadin.com/forum/thread/17197360
回答2:
This works (at least in latest Chrome).
<dom-module id="my-combo-box-theme" theme-for="vaadin-text-field">
<template>
<style>
/* styling for combo-box */
:host-context(vaadin-combo-box.custom1) [part="input-field"] {
border-top-left-radius: 0px;
border-bottom-left-radius: 0px;
}
</style>
</template>
</dom-module>
The key here is to use :host-context
CSS rule to only target text-field
part if it's under vaadin-combo-box
:host-context
basically allows to target ShadowDOM-in-ShadowDOM
The more in-depth description of :host-context
can be found on MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/:host-context()
来源:https://stackoverflow.com/questions/51553983/how-to-change-style-of-combo-box-in-vaadin-10