Yeah I know; your jelly you didn't think to mash those words together for great SEO. No, I assure you it's a real thing courtesy of this fun issue came as an idea from Paul Hibbits, an educator who loves Doxify / GravCMS. The idea was to be able to let users (or the developer) send links to people with parts of the UI disabled. This has a few possible use-cases:
- Quick A/B test of thing vs not thing
- Allow removing share links and other distractions
- Allow for removing parts of the UI when embedding in an iframe
In order to achieve this, I mixed together some interesting solutions. First, we allow a URL search parameter like this welcome-page?disable-features=footer,site-menu-content
. We can parse this into a string like so
const urlParams = new URLSearchParams(window.location.search);
const disableFeatures = urlParams.get("disable-features");
if (disableFeatures != null) {
this.disableFeatures = disableFeatures;
}
This allows us to set the internal disableFeatures
property in our web component based on the URL's search location. In LitElement we then reflect
that attribute so that we can do CSS selectors like this haxcms-site-builder[disable-features="thing"]
.
Understanding *=
Reading the Moz Doc page on attribute selectors we see a *=
selector which says:
Represents elements with an attribute name of attr whose value contains at least one occurrence of value within the string.
This means that if we have things,and,stuff
we can match on *="and"
successfully. Using this knowledge, We can create a selector like: haxcms-site-builder[disable-features*="site-menu-content"]
and successfully target that URL condition.
Show me the Shadow Parts
The ::part syntax + attribute, is a relative newcomer to HTML spec. It allows for targeting parts of elements that lay within shadowRoots of other elements in order to provide specific styling.
haxcms-site-builder[disable-features*="site-menu"] .haxcms-theme-element::part(site-menu)
Combining these approaches we get a solution like so which can successfully allow (smart) users to target and disable parts of the UI via the URL parameter while safely only allowing the targeting of ones we allow.
TLDR the fun video
You got it
The full CSS selector
haxcms-site-builder[disable-features*="site-menu"] .haxcms-theme-element::part(site-menu),
haxcms-site-builder[disable-features*="page-breadcrumb"] .haxcms-theme-element::part(page-breadcrumb),
haxcms-site-builder[disable-features*="print-branch-btn"] .haxcms-theme-element::part(print-branch-btn),
haxcms-site-builder[disable-features*="rss-btn"] .haxcms-theme-element::part(rss-btn),
haxcms-site-builder[disable-features*="git-corner-btn"] .haxcms-theme-element::part(git-corner-btn),
haxcms-site-builder[disable-features*="search-btn"] .haxcms-theme-element::part(search-btn),
haxcms-site-builder[disable-features*="site-menu-content"] .haxcms-theme-element::part(site-menu-content),
haxcms-site-builder[disable-features*="footer"] .haxcms-theme-element::part(footer),
haxcms-site-builder[disable-features*="qr-code-btn"] .haxcms-theme-element::part(qr-code-btn),
haxcms-site-builder[disable-features*="right-col"] .haxcms-theme-element::part(right-col),
haxcms-site-builder[disable-features*="left-col"] .haxcms-theme-element::part(left-col)
{
display: none !important;
}
Top comments (0)