說Facet以前，我們先說一下瀏覽器加載解析以及渲染的過程。瀏覽器獲取一個HTML的文件時，會按照自上向下的順序進行解析，並在加載過程中進行渲染。對html解析成DOM樹，對CSS 解析成CSS Rule樹，然后通過DOM數以及CSS Rule樹構造Rendering樹。
接下來轉回Facet，Facet是什么？有哪些的使用場景呢？
Facet 可以理解成一個占位符，這個占位符用於對父組件的指定的部分進行重新渲染。 很多組件都有默認的渲染，如果默認的渲染的結果不是你想要得到的結果，可以使用facet進行重新的渲染。通過Facet對默認組件進行重新渲染，從而生成你想要的Rendering樹，展示你想要的自定義的UI。
因為Facet是一個占位符，所以Facet不會單獨的出現在外層的組件，只會作為父元素組建的一個子進行出現。當然也不是所有的元素都可以使用Facet，只有部分的組件元素可以使用Facet。Facet既可以使用在lightning中，也可以使用到classic中。Facet在classic中使用 apex:facet 組件，在lightning中使用Aura.Component。
classic中Facet可以搭配的常用的父組件有：
apex:dataTable /apex:actionStatus / apex:column / apex:relatedList等，不同的組件支持的不同的自定義元素位置不同，具體可以查看API。
Classic使用
Demo舉例：針對Notes / Attachment related list, 標准提供的功能無法隱藏add按鈕，我們可以通過facet方式對apex:relatedList進行重新渲染，從而隱藏add按鈕。apex:relatedList可以對body,footer以及header進行重新渲染，demo中我們只渲染header，感興趣的可以操作其他的部分。
<apex:page standardController="Account"> <apex:relatedList list="CombinedAttachments"> <apex:facet name="header"> <table>
<tr>
<td class="pbTitle">
<h3>Notes and Attachments</h3>
</td>
</tr>
</table>
</apex:facet> </apex:relatedList> </apex:page>
結果展示：
Lightning使用
lightning中我們可以通過apex:attribute作為value provider作為參數傳遞以及使用，有兩個主要屬性，一個是name，一個是type，當type聲明為Aura:Component或者Aura:Component[]情況下，可以在父組件中動態傳遞參數進行渲染以及解析。
Demo舉例：動態傳遞參數，加載時傳遞參數才解析（demo來源於官方文檔）。
c:facetHeader：此元素組件聲明了一個header的attribute，類型為Aura.Component，當父元素組件引用此元素並且賦值情況下，便可以動態的加載賦值。這里面有一個{!v.body}需要說明，針對lightning，每個aura:component都會內置一個body的屬性，當父調用此元素時，此元素內部的body部分便會作為v.body進行渲染。
<aura:component> <aura:attribute name="header" type="Aura.Component[]"/> <div> <span class="header">{!v.header}</span><br/> </div> </aura:component>
c:helloFacet：此元素組件引用了facetHeader元素組件，其中 Nice body!將會作為facetHeader的body內容進行渲染，我們動態的賦值了header內容進行渲染。
<aura:component> See how we set the header facet.<br/> <c:facetHeader> Nice body! <aura:set attribute="header"> Hello Header! </aura:set> </c:facetHeader> </aura:component>
結果展示：
總結：此篇只是簡單的介紹了Facet的使用，Facet針對classic的組件可以進行很多的定制，比如table展示哪些固定的列，apex:actionStatus 做loading效果的起始截止樣式等。感興趣的可以自行試驗，篇中有問題的歡迎提出，有不懂的歡迎留言。