It sounds like you’re facing challenges with applying your own CSS styles, particularly because the element is part of the shadow DOM.
When dealing with shadow DOM, traditional CSS styling might not directly affect the elements within it. Shadow DOM encapsulates styles to prevent external styles from unintentionally affecting its internal components. To style elements within a shadow DOM, you can use a few approaches:
There are several CSS methods available, but not all are universally supported by all browsers. Currently, the most reliable approach is utilizing JavaScript. While it may not be the most elegant solution, it proves effective for achieving the desired results. Below is a brief example demonstrating how to style the button.
const easySubscribe = document.querySelector('#easy-subscribe');
const shadow = easySubscribe.shadowRoot;
if (shadow) {
const button = shadow.querySelector('button');
if (button) {
button.style.backgroundColor = 'lightblue';
button.style.color = 'white';
}
}
We’re actively exploring the possibility of introducing a custom CSS option in upcoming releases. Your feedback is valuable as we work towards enhancing our features.
