Hi All, AFAIK shadow DOM not supported by many browsers ATM. Can't we simply use unique ID and extend the class with ID to prevent the CSS conflicts.
Regards, *Dakshika Jayathilaka* PMC Member & Committer of Apache Stratos Associate Technical Lead WSO2, Inc. lean.enterprise.middleware 0771100911 On Thu, Aug 31, 2017 at 1:44 PM, Lasantha Samarakoon <[email protected]> wrote: > Hi all, > > In the new React based dashboard widget is defined as a another React > component. ATM these widgets are basic React components which extends from > React.Component class. > > But within these widgets we need to provide some extra capabilities for > widget developers such as providing mechanism to inter-communicate among > widgets via pub/sub, provide APIs to save widget states, etc. And also > there is another issue with the current implementation i.e. the CSS styles > embedded within a widget may conflict with styles applied to dashboard and > other widgets (no CSS isolation). > > *Solution:* > > As a common solution for these requirements we thought of introducing a > base widget class so that all the other widgets can extend from this base > class instead of React.Component. By introducing this base class we can > provide additional capabilities to widget developers. > > Ex. 1) Pub/sub > > For the Pub/sub implementation base widget component can expose methods > and events for widgets to use (methods for publishing/subscribing to topic). > > Ex. 2) CSS isolation > > For CSS isolation we can isolate the widget content using React shadow > DOM. For that we can introduce a new method called renderWidget() in the > widget base class and all the widgets can define the renderWidget() instead > of the React's render() method. Within the render() method of the widget > class we can invoke the renderWidget() method and wrap the resultant > content using React shadow DOM. High level implementation of those > components will be as follows. > > *Widget base component:* > > class Widget extends React.Component { > /* ... */ > render() { > return ( > <ShadowDom> > renderWidget() > </ShadowDom> > ); > } > /* ... */ > } > > > *Widget component:* > > class MyWidget extends Widget { > /* ... */ > renderWidget() { > return <MyWidgetContent />; > } > /* ... */ > } > > > Any feedback on this? > > Regards, > > *Lasantha Samarakoon* | Software Engineer > WSO2, Inc. > #20, Palm Grove, Colombo 03, Sri Lanka > Mobile: +94 (71) 214 1576 <+94%2071%20214%201576> > Email: [email protected] > Web: www.wso2.com > > lean . enterprise . middleware > > _______________________________________________ > Architecture mailing list > [email protected] > https://mail.wso2.org/cgi-bin/mailman/listinfo/architecture > >
_______________________________________________ Architecture mailing list [email protected] https://mail.wso2.org/cgi-bin/mailman/listinfo/architecture
