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

Question

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

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

Спасибо.

Answer 1

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

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

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

#uniqueId a {
    property: value;
}

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