include fragment element
v6.3.0
客户端包括标签。
$ npm install --save @github/include-fragment-element
所有include-fragment元素都必须具有一个src属性，从中可以从中检索HTML元素片段。
如果无法立即获取资源，则初始页面负载应包括要显示的后备内容。
import '@github/include-fragment-element'原来的
< div class =" tip " >
< include-fragment src =" /tips " >
< p > Loading tip… </ p >
</ include-fragment >
</ div >在页面加载上， include-fragment元素获取URL，将响应解析为HTML元素，该元素完全替代了include-fragment元素。
结果
< div class =" tip " >
< p > You look nice today </ p >
</ div >服务器必须用HTML片段响应以替换include-fragment元素。它不应包含另一个include-fragment元素，否则服务器将在无限循环中进行轮询。
此属性告诉<include-fragment/>作为提取请求的一部分，要发送什么作为Accept标头。如果省略，或者设置为空值，则默认行为将为text/html 。服务器对HTML响应很重要，但是您可能希望更改Accept Header，以帮助与服务器协商正确的内容。
这表明何时应获取内容：
eager ：无论<include-fragment/>当前是否在可见的视口内（这是默认值），都会立即获取和加载内容。lazy ：防御器提取和加载内容，直到<include-fragment/>标签达到与视口的计算距离。目的是避免使用网络和存储带宽来处理内容，直到相当确定需要它为止。如果URL未能加载， include-fragment元素将留在页面中，并标记为可用于样式的is-error CSS类。
请求生命周期事件在<include-fragment>元素上派遣。
loadstart服务器获取已启动。load - 请求成功完成。error - 请求失败。loadend请求已完成。include-fragment-replace （可取消） - 成功响应已被解析。它带有event.detail.fragment ，它将替换当前元素。include-fragment-replaced - 该元素已被片段取代。 const loader = document . querySelector ( 'include-fragment' )
const container = loader . parentElement
loader . addEventListener ( 'loadstart' , ( ) => container . classList . add ( 'is-loading' ) )
loader . addEventListener ( 'loadend' , ( ) => container . classList . remove ( 'is-loading' ) )
loader . addEventListener ( 'load' , ( ) => container . classList . add ( 'is-success' ) )
loader . addEventListener ( 'error' , ( ) => container . classList . add ( 'is-error' ) )| 属性 | 选项 | 描述 |
|---|---|---|
src | URL字符串 | 所需的URL加载替换HTML元素片段。 |
当src属性在<include-fragment>元素上可用时，服务器的替换标记请求开始。当元素渲染时，大多数情况下，这将发生在页面加载。但是，如果我们省略src属性直到以后的时间，我们可以将内容加载。
<details-menu>元素元素使用此技术推迟加载菜单内容，直到首次打开菜单为止。
推迟标记显示通常在以下使用模式中进行。
用户操作开始在服务器上开始缓慢运行的后台作业，例如备份存储在服务器上的文件。在运行备份作业时，向用户显示了一个进度栏。完成后，将Include-Fragment元素替换为备份文件的链接。
用户第一次访问一个包含耗时的标记的页面时，会显示加载指示器。当标记在服务器上完成构建时，它将存储在memcache中，并发送到浏览器以替换Include-Fragment Loader。随后访问该页面可直接呈现缓存的标记，而无需浏览包含碎片元素。
您可以调用javaScript的setCSPTrustedTypesPolicy(policy: TrustedTypePolicy | Promise<TrustedTypePolicy> | null)以设置CSP值得信赖的类型策略，该策略可以执行（同步）过滤或拒绝fetch响应，然后再将其插入到页面上：
import IncludeFragmentElement from "include-fragment-element" ;
import DOMPurify from "dompurify" ; // Using https://github.com/cure53/DOMPurify
// This policy removes all HTML markup except links.
const policy = trustedTypes . createPolicy ( "links-only" , {
createHTML : ( htmlText : string ) => {
return DOMPurify . sanitize ( htmlText , {
ALLOWED_TAGS : [ "a" ] ,
ALLOWED_ATTR : [ "href" ] ,
RETURN_TRUSTED_TYPE : true ,
} ) ;
} ,
} ) ;
IncludeFragmentElement . setCSPTrustedTypesPolicy ( policy ) ;该策略可以访问fetch响应对象。由于平台的限制，只能在策略中使用响应中的同步信息（除了HTML文本主体）：
import IncludeFragmentElement from "include-fragment-element" ;
const policy = trustedTypes . createPolicy ( "require-server-header" , {
createHTML : ( htmlText : string , response : Response ) => {
if ( response . headers . get ( "X-Server-Sanitized" ) !== "sanitized=true" ) {
// Note: this will reject the contents, but the error may be caught before it shows in the JS console.
throw new Error ( "Rejecting HTML that was not marked by the server as sanitized." ) ;
}
return htmlText ;
} ,
} ) ;
IncludeFragmentElement . setCSPTrustedTypesPolicy ( policy ) ;注意：
IncludeFragmentElement提取。include-fragment-element的负载之前调用setCSPTrustedTypesPolicy() 。Promise<TrustedTypePolicy> 。null以删除策略。这种声明的方法与SSI或ESI指令非常相似。实际上，边缘实现可以在将标记实际交付给客户端之前替换。
< include-fragment src =" /github/include-fragment/commit-count " timeout =" 100 " >
< p > Counting commits… </ p >
</ include-fragment >如果请求在超时之前完成，则代理可以尝试获取和替换片段。否则，标签将交付给客户端。该库仅实现客户端方面。
没有本机自定义元素支持的浏览器需要多填充。旧式浏览器需要各种其他聚票。有关详细信息，请参见examples/index.html 。
npm install
npm test
根据MIT许可分发。有关详细信息，请参见许可证。
