Кто-нибудь создал Shadow DOM, который предотвращает кровотечение / утечку таблиц стилей из Shadow DOM в IE 11 или Edge? - PullRequest
Новая
       28

Кто-нибудь создал Shadow DOM, который предотвращает кровотечение / утечку таблиц стилей из Shadow DOM в IE 11 или Edge?

1 голос
/ 07 мая 2019

Мне нужен веб-компонент, который не позволит стилам вытекать из Shadow DOM в IE 11 или Edge. Встроенные стили будут работать, но мне нужно использовать таблицы стилей.

Я перепробовал все, включая стандартные веб-компоненты, Polymer / LiteElement, Resact-Shadow-Dom-Component и простой старый JS. Код, который я прилагаю, очень простой. В этом примере не используются таблицы стилей, и он по-прежнему перекрывается. Я пробовал несколько полифилов. Я также пробовал загрузчик с отсрочкой и асинхронностью. Любая помощь с благодарностью. 

<!DOCTYPE html>
<html>
<head>

<meta charset="utf-8">
<title>hello-world</title>

<!-- Imports polyfill -->
<!--<script src="../webcomponentsjs/webcomponents.min.js"></script>-->
<script src="/node_modules/@webcomponents/webcomponentsjs/webcomponents- 
bundle.js"></script>
<script src="https://unpkg.com/@webcomponents/webcomponentsjs@^2/"> 
</script>

<!--<script src="node_modules/custom-elements-es5-adapter/custom- 
elements-es5-adapter.js"></script>-->
<!-- Imports custom element -->
<!--<link rel="import" href="hello-world.html">-->
<!--<script src="shadowComponent.js"></script>-->
<style>

    .text {
        color: red;
    }
</style>

</head>
<body>

<div class="text">I should be red.</div>

<div id="myText"></div>

<script type="text/javascript">
    var element = document.getElementById('myText');
    var styles = '.text{color: blue; }';

    var content = 'I should be blue.';

    var style = document.createElement('style');
    style.type = 'text/css';
    style.appendChild(document.createTextNode(styles));

    var p = document.createElement('p');
    p.className = 'text';
    p.appendChild(document.createTextNode(content));

    var shadowRootContainer = element.attachShadow({ mode: 'open' });
    var innerContainer = document.createElement('div');
    shadowRootContainer.appendChild(innerContainer);

    var shadowRoot = innerContainer.attachShadow({ mode: 'open' });

    shadowRoot.appendChild(style);
    shadowRoot.appendChild(p);

</script>
</body>
</html>

В этом примере есть вложенный Shadow DOM, потому что я был в своем уме и решил бросить некоторый код в стену, чтобы посмотреть, будет ли что-нибудь прилипать. Я знаю, что порядок имеет значение в стилях. Я ожидаю, что с polyfills это должно работать. Работает в Chrome (очевидно) FF и Opera. У меня есть более сложные примеры, если это необходимо. Снова любая помощь очень ценится.

Ответы [ 2 ]

3 голосов
/ 07 мая 2019

Там нет shadowDOM в IE11 или Edge (до хрома). Так что нет встроенного способа предотвращения проникновения shadowDOM.

Если вы используете что-то вроде BEM или какой-либо другой способ разделения имен ваших CSS-селекторов, вы можете ограничить проникновение.

0 голосов
/ 11 мая 2019

В основном вы можете эмулировать CSS с областью ShadowDOM с помощью ShadyCSS компонента webcopmonentsjs .Есть некоторые ограничения , и он будет содержать только CSS внутри компонента, он не предотвратит утечку внешних стилей.

...