CSP trusted types is an API that allows a website to reduce the possibility of XSS by controlling what kind of content can be placed in a "sink" like .innerHTML.

This release introduces a flexible callback that allows the calling code to provide its own sanitization or rejection of an server response for an <include-fragment-element>. For example, the site may want to allow the server to send a header to assert that certain HTML is sanitized and safe to use as-is, or the site may want to run the response through a sanitizer.

What's Changed

move AOR to primer by @keithamus in https://github.com/github/include-fragment-element/pull/80
Switch Promise chaining to async-await syntax. by @lgarron in https://github.com/github/include-fragment-element/pull/82
Fix the location of try in new async code. by @lgarron in https://github.com/github/include-fragment-element/pull/83
Fix up types for cached and returned data. by @lgarron in https://github.com/github/include-fragment-element/pull/84
Add a script for npm run format. by @lgarron in https://github.com/github/include-fragment-element/pull/85
Switch to web test runner by @keithamus in https://github.com/github/include-fragment-element/pull/86
Add setCSPTrustedTypesPolicy() for CSP trusted types. by @lgarron in https://github.com/github/include-fragment-element/pull/81
throw errors rather than resolving them by @keithamus in https://github.com/github/include-fragment-element/pull/87

New Contributors

@lgarron made their first contribution in https://github.com/github/include-fragment-element/pull/82
@rzhade3 and @fletchto99 made their first contribution in https://github.com/github/include-fragment-element/pull/81

Full Changelog: https://github.com/github/include-fragment-element/compare/v6.0.1...v6.1.0

include-fragment-element - v6.0.1

Published by koddsson over 2 years ago

What's Changed

Use chromium for karma tests by @theinterned in https://github.com/github/include-fragment-element/pull/73
Add a .devcontainer by @koddsson in https://github.com/github/include-fragment-element/pull/74
Add a release action by @koddsson in https://github.com/github/include-fragment-element/pull/76
Update dependencies by @koddsson in https://github.com/github/include-fragment-element/pull/77
Refactor private functions into the component by @koddsson in https://github.com/github/include-fragment-element/pull/78
Check if there's a network request already in flight by @koddsson in https://github.com/github/include-fragment-element/pull/79

New Contributors

@theinterned made their first contribution in https://github.com/github/include-fragment-element/pull/73

Full Changelog: https://github.com/github/include-fragment-element/compare/v6.0.0...v6.0.1

include-fragment-element - v6.0.0

Published by koddsson over 2 years ago

What's Changed

Update developer dependencies by @koddsson in https://github.com/github/include-fragment-element/pull/68
Remove a redundant line by @kidonng in https://github.com/github/include-fragment-element/pull/71
Set host element to a block its Shadow DOM by @koddsson in https://github.com/github/include-fragment-element/pull/72

New Contributors

@kidonng made their first contribution in https://github.com/github/include-fragment-element/pull/71

Full Changelog: https://github.com/github/include-fragment-element/compare/v5.3.2...v6.0.0

include-fragment-element -

Published by koddsson about 3 years ago

This release fixes a bug where calling load() on a loading=lazy element causes the contents not to be replaced when the element becomes visible.

Thanks to @latentflip for his contributions to this release 🙌🏻

https://github.com/github/include-fragment-element/compare/v5.3.1...v5.3.2

include-fragment-element -

Published by keithamus over 3 years ago

This release guarantees the order of events. The order will now always be:

loadstart
include-fragment-replace
include-fragment-replaced
load
loadend

This release also guarantees that during the loadstart dispatch, the <include-fragment> element will still exist and be connected to the DOM.

include-fragment-element -

Published by keithamus over 3 years ago

This adds a new attribute: loading. The loading attribute is eager by default but can be set to lazy which will defer loading of the fragment until it is visible in the viewport. This is similar to <img loading=lazy>.

include-fragment-element - v5.2.0

Published by muan over 4 years ago

This adds two custom events, include-fragment-replace and include-fragment-replaced. See details at https://github.com/github/include-fragment-element/pull/59.

include-fragment-element - v5.1.3

Published by muan over 4 years ago

Convert to TypeScript/remove Flow type support.
Package is now type module. UMD build is removed.

include-fragment-element -

Published by koddsson over 4 years ago

use .includes(..) instead of .match(..) to identify accept header (#56)

https://github.com/github/include-fragment-element/compare/v5.1.1...v5.1.2

include-fragment-element -

Published by koddsson over 4 years ago

Add type to HTMLElementTagNameMap in typescript declaration file (#55)

https://github.com/github/include-fragment-element/compare/v5.1.0...v5.1.1

include-fragment-element - v5.1.0

Published by muan almost 5 years ago

Add support for an optional <include-fragment accept=""> attribute for specifying the Accept header for fetch requests. #51.

include-fragment-element - 5.0.7

Published by dgraham about 5 years ago

Fix Flow module declaration #50

include-fragment-element -

Published by keithamus about 5 years ago

types(ts): fix window declaration type a4a8aa6

https://github.com/github/include-fragment-element/compare/v5.0.5...v5.0.6

include-fragment-element -

Published by keithamus about 5 years ago

types(TS): add window declaration c726aee

https://github.com/github/include-fragment-element/compare/v5.0.4...v5.0.5

include-fragment-element -

Published by koddsson about 5 years ago

Merge pull request #47 from github/publish-to-gpr-as-well ad5a52d
publish to GPR as a postpublish step 4ed82bf

https://github.com/github/include-fragment-element/compare/v5.0.3...v5.0.4

include-fragment-element - 5.0.4

Published by koddsson about 5 years ago

<include-fragment> element

A Client Side Includes tag.

Installation

$ npm install --save @github/include-fragment-element

Usage

All include-fragment elements must have a src attribute from which to retrieve an HTML element fragment.

The initial page load should include fallback content to be displayed if the resource could not be fetched immediately.

import '@github/include-fragment-element'

Original

<div class="tip">
  <include-fragment src="/tips">
    <p>Loading tip…</p>
  </include-fragment>
</div>

On page load, the include-fragment element fetches the URL, the response is parsed into an HTML element, which replaces the include-fragment element entirely.

Result

<div class="tip">
  <p>You look nice today</p>
</div>

The server must respond with an HTML fragment to replace the include-fragment element. It should not contain another include-fragment element or the server will be polled in an infinite loop.

Errors

If the URL fails to load, the include-fragment element is left in the page and tagged with an is-error CSS class that can be used for styling.

Events

Request lifecycle events are dispatched on the <include-fragment> element.

loadstart - The server fetch has started.
load - The request completed successfully.
error - The request failed.
loadend - The request has completed.

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'))

Options

Attribute	Options	Description
`src`	URL string	Required URL from which to load the replacement HTML element fragment.

Deferred loading

The request for replacement markup from the server starts when the src attribute becomes available on the <include-fragment> element. Most often this will happen at page load when the element is rendered. However, if we omit the src attribute until some later time, we can defer loading the content at all.

The <details-menu> element uses this technique to defer loading menu content until the menu is first opened.

Patterns

Deferring the display of markup is typically done in the following usage patterns.

A user action begins a slow running background job on the server, like backing up files stored on the server. While the backup job is running, a progress bar is shown to the user. When it's complete, the include-fragment element is replaced with a link to the backup files.
The first time a user visits a page that contains a time-consuming piece of markup to generate, a loading indicator is displayed. When the markup is finished building on the server, it's stored in memcache and sent to the browser to replace the include-fragment loader. Subsequent visits to the page render the cached markup directly, without going through a include-fragment element.

Relation to Server Side Includes

This declarative approach is very similar to SSI or ESI directives. In fact, an edge implementation could replace the markup before its actually delivered to the client.

<include-fragment src="/github/include-fragment/commit-count" timeout="100">
  <p>Counting commits…</p>
</include-fragment>

A proxy may attempt to fetch and replace the fragment if the request finishes before the timeout. Otherwise the tag is delivered to the client. This library only implements the client side aspect.

Browser support

Browsers without native custom element support require a polyfill. Legacy browsers require various other polyfills. See examples/index.html for details.