Security News
GitHub Removes Malicious Pull Requests Targeting Open Source Repositories
GitHub removed 27 malicious pull requests attempting to inject harmful code across multiple open source repositories, in another round of low-effort attacks.
skatejs-named-slots
Advanced tools
A polygap (partial polyfill) for the Shadow DOM Named Slot API. Also polyfills native v0 to behave like v1 with minimal overrides.
You can install via NPM:
npm install skatejs-named-slots
Or you can download it from NPMCDN:
https://npmcdn.com/skatejs-named-slots/dist/index-with-deps.min.js
You can import it using any module format:
// ES2015
import 'skatejs-named-slots';
// CommonJS
require('skatejs-named-slots');
// AMD
require(['skatejs-named-slots']);
Or you can use a <script>
tag:
<script src="https://npmcdn.com/skatejs-named-slots/dist/index-with-deps.min.js"></script>
Instead of polyfilling everything, we polyfill only the bare minimum that is required to supply the consumers of your custom elements with an API where they can distribute content to / from your element.
Your consumers may use it like so:
<my-component id="example">
<p>paragraph 1</p>
<p>paragraph 2</p>
</my-component>
Your shadow root may be templated out like:
<div class="wrapper">
<slot />
</div>
Which would result in:
<my-component id="example">
<div class="wrapper">
<slot>
<p>paragraph 1</p>
<p>paragraph 2</p>
</slot>
</div>
</my-component>
This polyfill is used in the same way as specified in the spec.
const host = document.createElement('div');
const root = host.attachShadow({ mode: 'closed' });
root.innerHTML = '<h1><slot name="title"></slot></h1><slot></slot>';
host.innerHTML = '<span slot="title">title</span><p>content</p>';
If the browser you run that code in does not support native Shadow DOM then it would render:
<div>
<_shadow_root_>
<h1>
<slot name="title">title</slot>
</h1>
<slot>
<p>content</p>
</slot>
</_shadow_root_>
</div>
The attachShadow()
method accepts an options dictionary as per the spec and requires that you specify a mode
that is either open
or closed
. For the polyfill, you may also specify an option for using a different name for the shadow root.
const root = host.attachShadow({ mode: 'open', polyfillShadowRootTagName: 'custom-shadow-root-name' });
Which would then render a shadow root as:
<custom-shadow-root-name>
The following describe what is polyfilled, what is not polyfilled, and why. All members which are not standardised or are listed as experimental are not included in these lists.
document.getElementById()
and element.querySelectorAll()
are not polyfilled for performance reasons.If possible, you should try and load this polyfill before anything else. If anything copies built-in prototypes before it has a chance to patch the built-in prototypes, you could get buggy behaviour.
These are members which are already polyfilled along with notes about their implementation details.
Element.assignedSlot
- Available on every node at time of creation. Available in WebKit after being added to a shadow root.Element.childElementCount
Element.children
- Same as Node.childNodes
except that it only contains element nodes.Element.firstElementChild
Element.innerHTML
Element.lastElementChild
Element.nextElementSibling
Element.outerHTML
Element.previousElementSibling
Element.slot
Node.childNodes
- Returns an array instead of a NodeList
, however, it applies an item()
function so things expecting it to behave like a NodeList
don't break.Node.firstChild
Node.lastChild
Node.nextSibling
Node.parentElement
Node.parentNode
Node.previousSibling
Node.textContent
Element.attachShadow()
HTMLSlotElement.assignedNodes()
- Only available after being added to a shadow root.Node.appendChild()
Node.hasChildNodes()
Node.insertBefore()
Node.removeChild()
Node.replaceChild()
These are members which are not yet polyfilled for a few reasons:
Element.id
Document.getElementById()
Element.getElementsByClassName()
Element.getElementsByTagName()
Element.getElementsByTagNameNS()
Element.setAttribute()
Element.querySelector()
Element.querySelectorAll()
Node.compareDocumentPosition()
Node.contains()
These are members which are not polyfilled because it's likely not necessary.
Element.accessKey
Element.attributes
Element.classList
Element.className
Element.namespaceURI
Element.tagName
Node.baseURI
Node.nodeName
Node.nodeType
Node.nodeValue
- doesn't need polyfilling because it returns null
on element nodes in native anyways.Node.ownerDocument
Element.getAttribute()
Element.getAttributeNS()
Element.getBoundingClientRect()
Element.getClientRects()
Element.hasAttribute()
Element.hasAttributeNS()
Element.hasAttributes()
Element.releasePointerCapture()
Element.removeAttribute()
Element.removeAttributeNS()
Element.setAttributeNS()
Element.setPointerCapture()
Node.addEventListener()
Node.cloneNode()
Node.dispatchEvent()
Node.isDefaultNamespace()
Node.isEqualNode()
Node.lookupNamespaceURI()
Node.lookupPrefix()
Node.normalize()
Node.removeEventListener()
There are minimal overrides for the native Shadow DOM implementations so that they behave like v1.
Element.innerHTML
HTMLContentElement.name
HTMLContentElement.assignedNodes()
HTMLContentElement.getAttribute()
HTMLContentElement.setAttribute()
HTMLElement.attachShadow()
HTMLElement.slot
Node.assignedSlot
ShadowRoot.innerHTML
Obviously, performance is a concern when polyfilling anything and the past has shown Shadow DOM polyfills to be slow. Since we're not polyfilling everything, and don't ever aim to, we strive to keep an acceptable level of performance.
We've written some simple perf tests to show overhead against native. These vary depending on the browser you run them, so if you're concerned about performance, it's best to run these yourself. You can do so by:
npm install
npm run test/perf
For most purposes, the performance should be acceptable. That said, we're always looking at ways to imporove.
FAQs
A polygap (partial polyfill) for the Shadow DOM Named Slot API.
The npm package skatejs-named-slots receives a total of 0 weekly downloads. As such, skatejs-named-slots popularity was classified as not popular.
We found that skatejs-named-slots demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 4 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
GitHub removed 27 malicious pull requests attempting to inject harmful code across multiple open source repositories, in another round of low-effort attacks.
Security News
RubyGems.org has added a new "maintainer" role that allows for publishing new versions of gems. This new permission type is aimed at improving security for gem owners and the service overall.
Security News
Node.js will be enforcing stricter semver-major PR policies a month before major releases to enhance stability and ensure reliable release candidates.