1. Для добавления стилей к элементам в Swiper-модуле можно использовать CSS. Например, можно создать отдельный файл стилей и подключить его к вашему проекту. Для этого можно использовать тег `<link>` или добавить стили непосредственно внутри тега `<style>` на странице.
Пример добавления стиля через тег `<link>`:
```html
<link rel="stylesheet" href="styles.css">
```
Пример добавления стилей непосредственно внутри тега `<style>`:
```html
<style>
.swiper-slide {
background-color: lightblue;
color: white;
}
</style>
```
2. Для подключения стилей для модулей в Swiper JS с использованием shadow DOM, можно создать отдельный компонент или элемент с shadow DOM и добавить стили к нему. Например, можно создать кастомный элемент `<swiper-module>` с shadow DOM и добавить стили к нему, чтобы стили применялись только к этому элементу.
Пример использования shadow DOM с стилями:
```javascript
const swiperModule = document.createElement('swiper-module');
const shadowRoot = swiperModule.attachShadow({ mode: 'open' });
const styles = `
.swiper-slide {
background-color: lightblue;
color: white;
}
`;
const styleElement = document.createElement('style');
styleElement.textContent = styles;
shadowRoot.appendChild(styleElement);
document.body.appendChild(swiperModule);
```
Таким образом, стили будут применяться только к элементам внутри shadow DOM элемента `<swiper-module>`.