Javascript Widget Affecting Style of the Page it is embedded in

Question

I'm currently developing a widget that can be embedded within a page. However, when embedded, it affects the style (font, text, layout, etc.) of the page it is embedded in.

I wonder how Clearspring and other widget frameworks encapsulate their widgets so as not to affect the embedding page.

Thanks.

Answer 1

Make your widget, say under one div with a unique Id (or class if there will be multiple) that is least likely to clash with others on the host page. A good example might be #company-widjet-name. See how jQuery UI does it (.ui-widget input).

Then you might need to perform a sort of localised reset, to avoid the parent page's CSS from stuffing up your design. Modify something like Eric Meyer's reset to suit. Please avoid the #uniqueId * { padding: 0, margin: 0 } as it can cause headaches.

As long as you do

#uniqueId a {
    property: value;
}

The specificity should be strong enough to style the elements correctly without letting the host page's CSS from changing it unintentionally.