message: fix(panel): prevent ff flash
  prevent flash on Firefox by moving reset styles into shadow-dom
diff: @@ -10,7 +10,10 @@ export const defaultTimeout = { enter: 400, exit: 100, appear: 400 }
  export const defaultClassNames = 'shadowPortal'
  -export interface ShadowPortalProps extends Partial<CSSTransitionProps> {
  +// prevent styles in shadow dom from inheriting outside rules
  +const styleResetBoundary: React.CSSProperties = { all: 'initial' }
  +
  +export interface ShadowPortalOwnProps {
  /** Unique id for the injected element */
  id: string
  /** Static content before the children */
  @@ -19,6 +22,8 @@ export interface ShadowPortalProps extends Partial<CSSTransitionProps> {
  panelCSS?: string
  }
  +export type ShadowPortalProps = ShadowPortalOwnProps & CSSTransitionProps
  +
  /**
  * Render a shadow DOM on Portal to a removable element with transition.
  * Insert the element to DOM when the Component mounts.
  @@ -42,8 +47,6 @@ export const ShadowPortal = (props: ShadowPortalProps) => {
  $root.id = id
  $root.className = `saladict-div ${shadowRootClassName ||
  SALADICT_EXTERNAL}`
  - // prevent styles in shadow dom from inheriting outside rules
  - $root.style.setProperty('all', 'initial')
  }
  return $root
  }, [shadowRootClassName])
  @@ -60,6 +63,7 @@ export const ShadowPortal = (props: ShadowPortalProps) => {
  return ReactDOM.createPortal(
  <root.div className={shadowRootClassName || SALADICT_EXTERNAL}>
  + <div style={styleResetBoundary}>
  {head}
  {panelCSS ? <style>{panelCSS}</style> : null}
  <CSSTransition
  @@ -86,6 +90,7 @@ export const ShadowPortal = (props: ShadowPortalProps) => {
  }
  }}
  />
  + </div>
  </root.div>,
  $root
  )
  