Блог

Главная - Вопросы по программированию - Как изолировать css?

Как изолировать css?

#html #css #widget #shadow-dom #isolation

Вопрос:

У меня есть проект в разработке, который будет чем-то вроде гаджета или виджета для его загрузки на других сайтах. Это не будет Iframe, но когда я загружаю его в качестве виджета на других сайтах, возникает множество CSS-конфликтов. Я искал решение и нашел ShadowDOM. Я пробовал это для решения проблемы! но ничего не вышло!

Я ценю, если вы поможете мне в этой проблеме.

 <div id="%REACT_APP_ROOT_ID%" data-plugin="%PLUGIN_ID"></div>
    <script>
      const widget = document.getElementById('rcroot');
      widget.attachShadow({ mode: 'open' });
      widget.shadowRoot.innerHTML = widget.innerHTML;
      widget.innerHTML = '';
    </script>
<div>

Комментарии:

1.можете ли вы изменить css, чтобы просто добавлять идентификатор везде? Нравится #my.widget div{} #my-widget .box{} и т. Д. И использовать какие-то неприятные мелочи !important здесь и там?

2. @Pepo_rasta даже я так делаю. также возникнут некоторые проблемы. например, мое боковое меню будет работать со всем документом. я имею в виду, что когда я открою его, он откроется с родительского веб-сайта. из-за этого самый безопасный способ-изолировать весь проект. но вопрос в том, как я могу это сделать? и спасибо вам за ваш комментарий!

3. Стандартные веб-компоненты React и W3C не являются лучшими друзьями (из-за (своего рода устаревшего) подхода к виртуальному DOM). Ищите в блогах информацию о том, что требуется для понимания веб-компонентов

Метки: