Компоненты сторонних производителей (не полимерные) с полимерным покрытием

Question

Каким образом создается облачный дизайн для стороннего (неполимерного) кода?

Я работаю над оберткой временной шкалы visjs, но стили, созданные внутри моего элемента оболочки полимера, чтобы стиль временной шкалы не работал, потому что они ограничены. Мне нужно изменить глобальные стили.

Есть ли способ сделать местный стиль?

Answer 1

Используйте префикс ::content в вашем CSS, тогда вы сможете избежать области действия и сделать обычный CSS.

Любые способы, если это не работает. Можете ли вы предоставить код?

Answer 2

Обычно я использую один трюк, который возможен из-за специфики CSS. Это очень удобно, когда вам нужно установить стиль на каком-то элементе и не хотите, чтобы это было важно везде. В вашей ситуации это тоже может помочь. Вот что я обнаружил, что график похож на http://visjs.org/examples/timeline/styling/customCss.html В основном этот стиль выполнен в этом примере. Таким образом, у нас есть некоторые Див здесь с идентификатором

<div id="visualization"></div> 

И внутри него генерируется все сроки, и это может быть стилизовано с обычным CSS, как

.vis-timeline { 
/* some properties goes here */ 
} 

.vis-item { 
/* some properties goes here */ 
} 
... 

Но он может также ван быть стилизовано с помощью немного битовые более специфические селекторы, как это:

#visualization .vis-timeline { 
/* some properties goes here */ 
} 

#visualization .vis-item { 
/* some properties goes here */ 
color: red; 
} 
... 
#second_visualization .vis-item { 
color: green; 
/* some properties goes here */ 
} 

и Вы можете сделать так много различных стилей на одной странице, как вам нравится, изменив идентификатор и добавить еще селекторы. На самом деле, используя эту специфику, вы можете создать много веб-компонентов - это супер простой способ переопределить любой встроенный стиль - просто добавьте что-то более важное в селектор, и вам хорошо идти.