Here is the situation
Consider some websites has base components / controls such as header, footer, etc, and say that they share some common components as well, such as custom input, custom button, accordion panel, etc.
The components can be shared in multiple ways, such as javascript libraries, or even server-side libraries such as dot net dlls. The component use common javascript library such as jquery, amberjs and css framework such as bootstrap.
The problem
In order to increase flexibility, the css and javascript library used in the components may has different version than the ones used in the site. Say that the component use jquery 1.8 and the site use 2.0 because the site is usually updated often, and the component isn't because backward compatibility with other sites. The conflict may occur in javascript or css (not loaded or has different version and definitions).
In javascript however, there are several workaround such as jquery noconflict and/or require js, but maybe not in other libraries. In css, I do not know any method available.
How can you design the components or site so they has decoupled between each other?
Side note:
I like wpf-style semantics (despite being hard to construct) in which we can encapsulate the structure, and maybe having another element inside element.
<textbox_autocomplete text="First">
<textbox_autocomplete.autocomplete_item>
<item>First</item>
<item>Second</item>
</textbox_autocomplete.autocomplete_item>
</textbox_autocomplete>
<script>
component.render(); //construct the textbox_autocomplete tag to html semantics
</script>
However it is unlikely to be achieved with current ability.
