Использовать CSS в веб-пакете только в рамках веб-компонента - PullRequest
Новая
       34

Использовать CSS в веб-пакете только в рамках веб-компонента

0 голосов
/ 18 марта 2019

Я использую webpack и extract-text-webpack-plugin для связывания веб-компонента (созданного с помощью preact-custom-element ) и его стиль.

Я могу успешно использовать компонент в отдельном html-файле, например: 

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div>
    <script async src="./webcomponent.js" type="text/javascript"></script>
    <custom-menu name="Test"></custom-menu>
</div>
</body>
</html>

Тег custom-menu - это мой веб-компонент. Он показывает стилизованный пользовательский компонент, как и ожидалось.

Однако я хочу знать, есть ли возможность применить мой пользовательский CSS (вставленный с использованием извлеченного файла styles.css) только к пользовательскому элементу и не позволяя стилю потенциально перезаписывать другие стили, принадлежащие элементам html, вне webcomponent.

Мой конфиг веб-пакета: 

const path = require('path');

const ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = {
    entry: {
        webcomponent: './lib/menu/menu-panel-webcomponent-controller.widget.js'
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: ExtractTextPlugin.extract({
                    fallback: "style-loader",
                    use: "css-loader"
                })
            }
        ]
    },
    output: {
        path: path.resolve(__dirname, 'widget/')
    },
    plugins: [
        new ExtractTextPlugin("styles.css")
    ]
};

Он берет мой пользовательский компонент menu-panel-webcomponent-controller.widget.js и применяет функцию extract ExtractTextPlugin ко всем файлам CSS. Полученный пакет вместе со стилем styles.css затем находится внутри каталога widget/.

Ответы [ 2 ]

1 голос
/ 26 марта 2019

Вот что я нашел:

Я нашел preact shadow dom , который позволяет реализовать теневой DOM. Теневой DOM допускает ограниченный CSS, что означает, что CSS привязан только к компоненту и не может быть подвержен влиянию извне и не может просочиться за пределы его области действия.

Однако обратите внимание, что в настоящее время MS Edge не поддерживает теневую DOM (см. Их план ).

Я также обнаружил, что локальная область видимости CSS может быть сделана только с помощью веб-пакета. См. https://github.com/webpack-contrib/css-loader. Однако загрузчик явно заменяет локальные селекторы уникальными идентификаторами.

Пример: 

:local(.className) {
  background: red;
}

Результат: 

._23_aKvs-b8bW2Vg3fwHozO {
  background: red;
}
0 голосов
/ 18 марта 2019

Нет, любые таблицы стилей, вставленные в документ, будут применяться ко всему документу.Почему вы хотите это сделать?

...