06-EncapsulatingExternalBehaviorWithPortals.md

以 modal component 為例

<div style="opacity: .5">
  <announcement-modal></announcement-modal>
</div>

announcement-modal 放在 <div> 內基本上沒有問題，理想上也該如此，讓 components 之間高內聚。不過若該 <div> 有自己的 style，且不希望此 style 套用到 component 上，則需要做些設計來達成。

Use the portal pattern to avoid leaking implementation details to other components and cause unnecessary coupling.

portal-vue :

A Portal Component for Vuejs, to render DOM outside of a component, anywhere in the document.

Vue.use(PortalVue);

https://vuejs.org/v2/api/#Vue-use

---

JavaScript Template Literals

string text ${expression} string text