Виджет Javascript, влияющий на стиль страницы, встроен в

В настоящее время я разрабатываю виджет, который может быть встроен в страницу. Однако при встраивании он влияет на стиль (шрифт, текст, макет и т.д.) На странице, в которую он встроен.

Интересно, как Clearspring и другие структуры виджетов инкапсулируют свои виджеты, чтобы не влиять на страницу внедрения.

Спасибо.

Ответ 1

Создайте свой виджет, скажем, под одним div с уникальным идентификатором (или классом, если его будет несколько), который наименее вероятно столкнется с другими на главной странице. Хорошим примером может быть #company-widjet-name. Посмотрите, как работает пользовательский интерфейс jQuery (.ui-widget input).

Затем вам может понадобиться выполнить локализованный reset, чтобы избежать CSS-страницы родительской страницы, чтобы добавить в свой дизайн. Измените что-то вроде Eric Meyer reset. Пожалуйста, избегайте #uniqueId * { padding: 0, margin: 0 }, так как это может вызвать головные боли.

Пока вы делаете

#uniqueId a {
    property: value;
}

Специфика должна быть достаточно сильной, чтобы правильно стилизовать элементы, не позволяя CSS-странице хоста изменять ее непреднамеренно.