Security News
Highlights from the 2024 Rails Community Survey
A record 2,709 developers participated in the 2024 Ruby on Rails Community Survey, revealing key tools, practices, and trends shaping the Rails ecosystem.
skatejs-named-slots
Advanced tools
A polygap (partial polyfill) for the Shadow DOM Named Slot API.
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.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
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.getAssignedNodes()
- 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.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.setAttribute()
Element.setAttributeNS()
Element.setPointerCapture()
Node.addEventListener()
Node.cloneNode()
Node.dispatchEvent()
Node.isDefaultNamespace()
Node.isEqualNode()
Node.lookupNamespaceURI()
Node.lookupPrefix()
Node.normalize()
Node.removeEventListener()
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
gulp 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.
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
A record 2,709 developers participated in the 2024 Ruby on Rails Community Survey, revealing key tools, practices, and trends shaping the Rails ecosystem.
Security News
In 2023, data breaches surged 78% from zero-day and supply chain attacks, but developers are still buried under alerts that are unable to prevent these threats.
Security News
Solo open source maintainers face burnout and security challenges, with 60% unpaid and 60% considering quitting.