This repository was archived by the owner on Sep 16, 2020. It is now read-only.
BranchesTags

Repository files navigation

Custom Elements V0 API

A cross browser document.registerElement without built-in extends.

donateLicense: ISC

How to use it

Simply include the polyfill on top of your page and use document.registerElement(name, info) like the good old days.

<scriptsrc="https://unpkg.com/ce-v0@latest/min.js"></script>

Compatibility

Same compatibility of original polyfill: every Mobile and Desktop browser.

You can verify your browser compatibility live.

V0 API

varMyElement=document.registerElement('my-element',{prototype: Object.create(HTMLElement.prototype,{createdCallback: {value: function(){console.log('custom element ready/upgraded');// better than V1 constructor() {}// because the element here will always// be already upgraded}},attachedCallback: {value: function(){console.log('custom element connected');// same as connectedCallback}},detachedCallback: {value: function(){console.log('custom element disconnected');// same as disconnectedCallback}},attributeChangedCallback: {value: function(name,oldValue,newValue){console.log('*any* attribute change');// different from V1 in two ways:// * it does not trigger twice with same attribute value// * it triggers for any attribute change, no need// to define static get observedAttributes() {[...]}}}})});// example via createElementdocument.body.appendChild(document.createElement('my-element'));// using the class directlydocument.body.appendChild(newMyElement);

No extends will be performed, create extends from your own classes if needed (i.e. from MyElement.prototype).

Why resurrecting a deprecated API?

TL;DR with native V1 API available it's easy to re-create V0 behavior keeping performance while it's not true the other way around.

This projects solves all transpilations and compatibility issues, providing a reliable, battle tested, V0 API for every browser.

To know more, please read the related blog entry.

Still future friendly!

By no means this project wants to stop adoption or usage of V1 API, quite the opposite, it's waiting for the time where every browser ships it natively, and every part of V0 related code can be dropped to make it a 1KB downgrade fully based on V1, like it is already for both Chrome and Safari.

Don't you like it? Use Component

constMyElement=newComponent({// the Custom Element namename: 'my-element',// one or more static propertystatic: {TEST: 123,method(){}},// alias for createdCallback// the component is ready/upgraded hereconstructor(){},// alias for attributeChangedCallbackonattribute(){},// alias for attachedCallbackonconnected(){},// alias for detachedCallbackondisconnected(){}// any other prototype definition is allowed// including getters and setters});

Component Caveats

If you use static methods / properties inside methods you need to define your components upfront.

About

Custom Elements V0 API

Resources

Readme
ISC license
Activity

Stars

18 stars

Watchers

1 watching

Forks

1 fork
Report repository

Releases

Packages

Used by

Contributors

Languages

, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Add copy buttons to all 
 blocks\n(function() {\n function addCopyButtons() {\n document.querySelectorAll('pre code').forEach(function(codeBlock) {\n if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;\n codeBlock.parentElement.setAttribute('data-copy-added', 'true');\n \n var btn = document.createElement('button');\n btn.textContent = 'Copy';\n btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';\n btn.onmouseover = function() { this.style.opacity = '1'; };\n btn.onmouseout = function() { this.style.opacity = '0.7'; };\n btn.onclick = function() {\n navigator.clipboard.writeText(codeBlock.textContent).then(function() {\n btn.textContent = 'Copied!';\n setTimeout(function() { btn.textContent = 'Copy'; }, 1500);\n });\n };\n codeBlock.parentElement.style.position = 'relative';\n codeBlock.parentElement.appendChild(btn);\n });\n }\n \n addCopyButtons();\n \n // Re-run on dynamic content\n var observer = new MutationObserver(addCopyButtons);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Add Copy Buttons to Code Blocks");
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '

Skip to content

This repository was archived by the owner on Sep 16, 2020. It is now read-only.

BranchesTags
Repository files navigation
Custom Elements V0 API
A cross browser document.registerElement without built-in extends.
donateLicense: ISC
How to use it
Simply include the polyfill on top of your page and use document.registerElement(name, info) like the good old days.
<scriptsrc="https://unpkg.com/ce-v0@latest/min.js"></script>
Compatibility
Same compatibility of original polyfill: every Mobile and Desktop browser.
You can verify your browser compatibility live.
V0 API
varMyElement=document.registerElement('my-element',{prototype: Object.create(HTMLElement.prototype,{createdCallback: {value: function(){console.log('custom element ready/upgraded');// better than V1 constructor() {}// because the element here will always// be already upgraded}},attachedCallback: {value: function(){console.log('custom element connected');// same as connectedCallback}},detachedCallback: {value: function(){console.log('custom element disconnected');// same as disconnectedCallback}},attributeChangedCallback: {value: function(name,oldValue,newValue){console.log('*any* attribute change');// different from V1 in two ways:// * it does not trigger twice with same attribute value// * it triggers for any attribute change, no need// to define static get observedAttributes() {[...]}}}})});// example via createElementdocument.body.appendChild(document.createElement('my-element'));// using the class directlydocument.body.appendChild(newMyElement);
No extends will be performed, create extends from your own classes if needed (i.e. from MyElement.prototype).
Why resurrecting a deprecated API?
TL;DR with native V1 API available it's easy to re-create V0 behavior keeping performance while it's not true the other way around.
This projects solves all transpilations and compatibility issues, providing a reliable, battle tested, V0 API for every browser.
To know more, please read the related blog entry.
Still future friendly!
By no means this project wants to stop adoption or usage of V1 API, quite the opposite, it's waiting for the time where every browser ships it natively, and every part of V0 related code can be dropped to make it a 1KB downgrade fully based on V1, like it is already for both Chrome and Safari.
Don't you like it? Use Component
constMyElement=newComponent({// the Custom Element namename: 'my-element',// one or more static propertystatic: {TEST: 123,method(){}},// alias for createdCallback// the component is ready/upgraded hereconstructor(){},// alias for attributeChangedCallbackonattribute(){},// alias for attachedCallbackonconnected(){},// alias for detachedCallbackondisconnected(){}// any other prototype definition is allowed// including getters and setters});
Component Caveats
If you use static methods / properties inside methods you need to define your components upfront.
About
Custom Elements V0 API
Resources
Readme
ISC license
Activity
Stars
18 stars
Watchers
1 watching
Forks
1 fork
Report repository
Releases
Packages
Used by
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Force GitHub README to respect dark mode\n(function() {\n var style = document.createElement('style');\n style.textContent = '\n .markdown-body {\n color-scheme: dark light;\n }\n .markdown-body pre { background: #161b22 !important; }\n .markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }\n .markdown-body table th, .markdown-body table td { border-color: #30363d !important; }\n .markdown-body img { background: #0d1117; }\n .markdown-body blockquote { border-left-color: #8b949e; }\n .markdown-body hr { border-color: #30363d; }\n ';\n document.head.appendChild(style);\n})();", "GitHub Dark Mode README Fix");
}
} catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content

This repository was archived by the owner on Sep 16, 2020. It is now read-only.

BranchesTags
Repository files navigation
Custom Elements V0 API
A cross browser document.registerElement without built-in extends.
donateLicense: ISC
How to use it
Simply include the polyfill on top of your page and use document.registerElement(name, info) like the good old days.
<scriptsrc="https://unpkg.com/ce-v0@latest/min.js"></script>
Compatibility
Same compatibility of original polyfill: every Mobile and Desktop browser.
You can verify your browser compatibility live.
V0 API
varMyElement=document.registerElement('my-element',{prototype: Object.create(HTMLElement.prototype,{createdCallback: {value: function(){console.log('custom element ready/upgraded');// better than V1 constructor() {}// because the element here will always// be already upgraded}},attachedCallback: {value: function(){console.log('custom element connected');// same as connectedCallback}},detachedCallback: {value: function(){console.log('custom element disconnected');// same as disconnectedCallback}},attributeChangedCallback: {value: function(name,oldValue,newValue){console.log('*any* attribute change');// different from V1 in two ways:// * it does not trigger twice with same attribute value// * it triggers for any attribute change, no need// to define static get observedAttributes() {[...]}}}})});// example via createElementdocument.body.appendChild(document.createElement('my-element'));// using the class directlydocument.body.appendChild(newMyElement);
No extends will be performed, create extends from your own classes if needed (i.e. from MyElement.prototype).
Why resurrecting a deprecated API?
TL;DR with native V1 API available it's easy to re-create V0 behavior keeping performance while it's not true the other way around.
This projects solves all transpilations and compatibility issues, providing a reliable, battle tested, V0 API for every browser.
To know more, please read the related blog entry.
Still future friendly!
By no means this project wants to stop adoption or usage of V1 API, quite the opposite, it's waiting for the time where every browser ships it natively, and every part of V0 related code can be dropped to make it a 1KB downgrade fully based on V1, like it is already for both Chrome and Safari.
Don't you like it? Use Component
constMyElement=newComponent({// the Custom Element namename: 'my-element',// one or more static propertystatic: {TEST: 123,method(){}},// alias for createdCallback// the component is ready/upgraded hereconstructor(){},// alias for attributeChangedCallbackonattribute(){},// alias for attachedCallbackonconnected(){},// alias for detachedCallbackondisconnected(){}// any other prototype definition is allowed// including getters and setters});
Component Caveats
If you use static methods / properties inside methods you need to define your components upfront.
About
Custom Elements V0 API
Resources
Readme
ISC license
Activity
Stars
18 stars
Watchers
1 watching
Forks
1 fork
Report repository
Releases
Packages
Used by
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Highlight search terms from Google/DuckDuckGo/Bing referrer\n(function() {\n var ref = document.referrer;\n var terms = [];\n \n if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {\n var url = new URL(ref);\n var q = url.searchParams.get('q') || url.searchParams.get('p');\n if (q) {\n terms = q.split(/\\s+/).filter(function(t) { return t.length > 2; });\n }\n }\n \n if (terms.length === 0) return;\n \n var style = document.createElement('style');\n style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';\n document.head.appendChild(style);\n \n function highlight(node) {\n if (node.nodeType === 3) { // text node\n var text = node.textContent;\n var found = false;\n terms.forEach(function(term) {\n var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\') + ')', 'gi');\n if (regex.test(text)) {\n found = true;\n var frag = document.createDocumentFragment();\n var parts = text.split(regex);\n parts.forEach(function(part, i) {\n if (i % 2 === 0) {\n frag.appendChild(document.createTextNode(part));\n } else {\n var span = document.createElement('span');\n span.className = 'userscript-highlight';\n span.textContent = part;\n frag.appendChild(span);\n }\n });\n node.parentNode.replaceChild(frag, node);\n }\n });\n } else if (node.nodeType === 1 && node.childNodes) { // element\n var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];\n if (!skipTags.includes(node.tagName)) {\n Array.from(node.childNodes).forEach(highlight);\n }\n }\n }\n \n highlight(document.body);\n \n // Re-highlight on dynamic content\n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1 || node.nodeType === 3) highlight(node);\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Highlight Search Terms");
}
} catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content

This repository was archived by the owner on Sep 16, 2020. It is now read-only.

BranchesTags
Repository files navigation
Custom Elements V0 API
A cross browser document.registerElement without built-in extends.
donateLicense: ISC
How to use it
Simply include the polyfill on top of your page and use document.registerElement(name, info) like the good old days.
<scriptsrc="https://unpkg.com/ce-v0@latest/min.js"></script>
Compatibility
Same compatibility of original polyfill: every Mobile and Desktop browser.
You can verify your browser compatibility live.
V0 API
varMyElement=document.registerElement('my-element',{prototype: Object.create(HTMLElement.prototype,{createdCallback: {value: function(){console.log('custom element ready/upgraded');// better than V1 constructor() {}// because the element here will always// be already upgraded}},attachedCallback: {value: function(){console.log('custom element connected');// same as connectedCallback}},detachedCallback: {value: function(){console.log('custom element disconnected');// same as disconnectedCallback}},attributeChangedCallback: {value: function(name,oldValue,newValue){console.log('*any* attribute change');// different from V1 in two ways:// * it does not trigger twice with same attribute value// * it triggers for any attribute change, no need// to define static get observedAttributes() {[...]}}}})});// example via createElementdocument.body.appendChild(document.createElement('my-element'));// using the class directlydocument.body.appendChild(newMyElement);
No extends will be performed, create extends from your own classes if needed (i.e. from MyElement.prototype).
Why resurrecting a deprecated API?
TL;DR with native V1 API available it's easy to re-create V0 behavior keeping performance while it's not true the other way around.
This projects solves all transpilations and compatibility issues, providing a reliable, battle tested, V0 API for every browser.
To know more, please read the related blog entry.
Still future friendly!
By no means this project wants to stop adoption or usage of V1 API, quite the opposite, it's waiting for the time where every browser ships it natively, and every part of V0 related code can be dropped to make it a 1KB downgrade fully based on V1, like it is already for both Chrome and Safari.
Don't you like it? Use Component
constMyElement=newComponent({// the Custom Element namename: 'my-element',// one or more static propertystatic: {TEST: 123,method(){}},// alias for createdCallback// the component is ready/upgraded hereconstructor(){},// alias for attributeChangedCallbackonattribute(){},// alias for attachedCallbackonconnected(){},// alias for detachedCallbackondisconnected(){}// any other prototype definition is allowed// including getters and setters});
Component Caveats
If you use static methods / properties inside methods you need to define your components upfront.
About
Custom Elements V0 API
Resources
Readme
ISC license
Activity
Stars
18 stars
Watchers
1 watching
Forks
1 fork
Report repository
Releases
Packages
Used by
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Strip utm_, fbclid, gclid, etc. from all links on page\n(function() {\n var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',\n 'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',\n 'ref', 'ref_src', 'source', 'medium', 'campaign'];\n \n function cleanUrl(url) {\n try {\n var u = new URL(url, window.location.origin);\n var changed = false;\n trackingParams.forEach(function(p) {\n if (u.searchParams.has(p)) {\n u.searchParams.delete(p);\n changed = true;\n }\n });\n return changed ? u.toString() : url;\n } catch (e) {\n return url;\n }\n }\n \n function cleanLinks() {\n document.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n \n cleanLinks();\n \n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1) {\n if (node.tagName === 'A') cleanLinks();\n node.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Remove Tracking Parameters from Links");
}
} catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); }
})();
(function(){
try {
var __m = "youtube.com";
var __re = new RegExp('^' + "youtube\\.com" + '

Skip to content

This repository was archived by the owner on Sep 16, 2020. It is now read-only.

BranchesTags
Repository files navigation
Custom Elements V0 API
A cross browser document.registerElement without built-in extends.
donateLicense: ISC
How to use it
Simply include the polyfill on top of your page and use document.registerElement(name, info) like the good old days.
<scriptsrc="https://unpkg.com/ce-v0@latest/min.js"></script>
Compatibility
Same compatibility of original polyfill: every Mobile and Desktop browser.
You can verify your browser compatibility live.
V0 API
varMyElement=document.registerElement('my-element',{prototype: Object.create(HTMLElement.prototype,{createdCallback: {value: function(){console.log('custom element ready/upgraded');// better than V1 constructor() {}// because the element here will always// be already upgraded}},attachedCallback: {value: function(){console.log('custom element connected');// same as connectedCallback}},detachedCallback: {value: function(){console.log('custom element disconnected');// same as disconnectedCallback}},attributeChangedCallback: {value: function(name,oldValue,newValue){console.log('*any* attribute change');// different from V1 in two ways:// * it does not trigger twice with same attribute value// * it triggers for any attribute change, no need// to define static get observedAttributes() {[...]}}}})});// example via createElementdocument.body.appendChild(document.createElement('my-element'));// using the class directlydocument.body.appendChild(newMyElement);
No extends will be performed, create extends from your own classes if needed (i.e. from MyElement.prototype).
Why resurrecting a deprecated API?
TL;DR with native V1 API available it's easy to re-create V0 behavior keeping performance while it's not true the other way around.
This projects solves all transpilations and compatibility issues, providing a reliable, battle tested, V0 API for every browser.
To know more, please read the related blog entry.
Still future friendly!
By no means this project wants to stop adoption or usage of V1 API, quite the opposite, it's waiting for the time where every browser ships it natively, and every part of V0 related code can be dropped to make it a 1KB downgrade fully based on V1, like it is already for both Chrome and Safari.
Don't you like it? Use Component
constMyElement=newComponent({// the Custom Element namename: 'my-element',// one or more static propertystatic: {TEST: 123,method(){}},// alias for createdCallback// the component is ready/upgraded hereconstructor(){},// alias for attributeChangedCallbackonattribute(){},// alias for attachedCallbackonconnected(){},// alias for detachedCallbackondisconnected(){}// any other prototype definition is allowed// including getters and setters});
Component Caveats
If you use static methods / properties inside methods you need to define your components upfront.
About
Custom Elements V0 API
Resources
Readme
ISC license
Activity
Stars
18 stars
Watchers
1 watching
Forks
1 fork
Report repository
Releases
Packages
Used by
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Auto-enable theater mode on YouTube\n(function() {\n function tryTheater() {\n var btn = document.querySelector('button[aria-label=\"Theater mode\"], ytd-player #player button[title=\"Theater mode\"]');\n if (btn && !btn.classList.contains('activated')) {\n btn.click();\n }\n }\n \n // Try immediately\n tryTheater();\n \n // Try after navigation (SPA)\n var lastUrl = location.href;\n setInterval(function() {\n if (location.href !== lastUrl) {\n lastUrl = location.href;\n setTimeout(tryTheater, 500);\n }\n }, 1000);\n \n // Also try on player load\n var observer = new MutationObserver(tryTheater);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "YouTube Theater Mode Default");
}
} catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content

This repository was archived by the owner on Sep 16, 2020. It is now read-only.

BranchesTags
Repository files navigation
Custom Elements V0 API
A cross browser document.registerElement without built-in extends.
donateLicense: ISC
How to use it
Simply include the polyfill on top of your page and use document.registerElement(name, info) like the good old days.
<scriptsrc="https://unpkg.com/ce-v0@latest/min.js"></script>
Compatibility
Same compatibility of original polyfill: every Mobile and Desktop browser.
You can verify your browser compatibility live.
V0 API
varMyElement=document.registerElement('my-element',{prototype: Object.create(HTMLElement.prototype,{createdCallback: {value: function(){console.log('custom element ready/upgraded');// better than V1 constructor() {}// because the element here will always// be already upgraded}},attachedCallback: {value: function(){console.log('custom element connected');// same as connectedCallback}},detachedCallback: {value: function(){console.log('custom element disconnected');// same as disconnectedCallback}},attributeChangedCallback: {value: function(name,oldValue,newValue){console.log('*any* attribute change');// different from V1 in two ways:// * it does not trigger twice with same attribute value// * it triggers for any attribute change, no need// to define static get observedAttributes() {[...]}}}})});// example via createElementdocument.body.appendChild(document.createElement('my-element'));// using the class directlydocument.body.appendChild(newMyElement);
No extends will be performed, create extends from your own classes if needed (i.e. from MyElement.prototype).
Why resurrecting a deprecated API?
TL;DR with native V1 API available it's easy to re-create V0 behavior keeping performance while it's not true the other way around.
This projects solves all transpilations and compatibility issues, providing a reliable, battle tested, V0 API for every browser.
To know more, please read the related blog entry.
Still future friendly!
By no means this project wants to stop adoption or usage of V1 API, quite the opposite, it's waiting for the time where every browser ships it natively, and every part of V0 related code can be dropped to make it a 1KB downgrade fully based on V1, like it is already for both Chrome and Safari.
Don't you like it? Use Component
constMyElement=newComponent({// the Custom Element namename: 'my-element',// one or more static propertystatic: {TEST: 123,method(){}},// alias for createdCallback// the component is ready/upgraded hereconstructor(){},// alias for attributeChangedCallbackonattribute(){},// alias for attachedCallbackonconnected(){},// alias for detachedCallbackondisconnected(){}// any other prototype definition is allowed// including getters and setters});
Component Caveats
If you use static methods / properties inside methods you need to define your components upfront.
About
Custom Elements V0 API
Resources
Readme
ISC license
Activity
Stars
18 stars
Watchers
1 watching
Forks
1 fork
Report repository
Releases
Packages
Used by
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Remove or un-stick sticky/fixed headers that block content\n(function() {\n function unstick() {\n document.querySelectorAll('header, nav, [role=\"banner\"], .header, .navbar, .sticky, .fixed-top, [style*=\"position: fixed\"], [style*=\"position:sticky\"]').forEach(function(el) {\n if (el.style.position === 'fixed' || el.style.position === 'sticky' || \n getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {\n el.style.position = 'static';\n el.style.top = 'auto';\n el.style.zIndex = 'auto';\n }\n });\n }\n \n unstick();\n \n var observer = new MutationObserver(unstick);\n observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });\n})();", "Kill Sticky Headers");
}
} catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content

This repository was archived by the owner on Sep 16, 2020. It is now read-only.

BranchesTags
Repository files navigation
Custom Elements V0 API
A cross browser document.registerElement without built-in extends.
donateLicense: ISC
How to use it
Simply include the polyfill on top of your page and use document.registerElement(name, info) like the good old days.
<scriptsrc="https://unpkg.com/ce-v0@latest/min.js"></script>
Compatibility
Same compatibility of original polyfill: every Mobile and Desktop browser.
You can verify your browser compatibility live.
V0 API
varMyElement=document.registerElement('my-element',{prototype: Object.create(HTMLElement.prototype,{createdCallback: {value: function(){console.log('custom element ready/upgraded');// better than V1 constructor() {}// because the element here will always// be already upgraded}},attachedCallback: {value: function(){console.log('custom element connected');// same as connectedCallback}},detachedCallback: {value: function(){console.log('custom element disconnected');// same as disconnectedCallback}},attributeChangedCallback: {value: function(name,oldValue,newValue){console.log('*any* attribute change');// different from V1 in two ways:// * it does not trigger twice with same attribute value// * it triggers for any attribute change, no need// to define static get observedAttributes() {[...]}}}})});// example via createElementdocument.body.appendChild(document.createElement('my-element'));// using the class directlydocument.body.appendChild(newMyElement);
No extends will be performed, create extends from your own classes if needed (i.e. from MyElement.prototype).
Why resurrecting a deprecated API?
TL;DR with native V1 API available it's easy to re-create V0 behavior keeping performance while it's not true the other way around.
This projects solves all transpilations and compatibility issues, providing a reliable, battle tested, V0 API for every browser.
To know more, please read the related blog entry.
Still future friendly!
By no means this project wants to stop adoption or usage of V1 API, quite the opposite, it's waiting for the time where every browser ships it natively, and every part of V0 related code can be dropped to make it a 1KB downgrade fully based on V1, like it is already for both Chrome and Safari.
Don't you like it? Use Component
constMyElement=newComponent({// the Custom Element namename: 'my-element',// one or more static propertystatic: {TEST: 123,method(){}},// alias for createdCallback// the component is ready/upgraded hereconstructor(){},// alias for attributeChangedCallbackonattribute(){},// alias for attachedCallbackonconnected(){},// alias for detachedCallbackondisconnected(){}// any other prototype definition is allowed// including getters and setters});
Component Caveats
If you use static methods / properties inside methods you need to define your components upfront.
About
Custom Elements V0 API
Resources
Readme
ISC license
Activity
Stars
18 stars
Watchers
1 watching
Forks
1 fork
Report repository
Releases
Packages
Used by
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Universal Dark Mode - works on any site\n(function() {\n var enabled = true;\n \n function applyDarkMode() {\n if (!enabled) return;\n \n // Create style element if it doesn't exist\n var style = document.getElementById('universal-dark-mode-style');\n if (!style) {\n style = document.createElement('style');\n style.id = 'universal-dark-mode-style';\n document.head.appendChild(style);\n }\n \n // Dark mode CSS - inverts colors but preserves images/video\n style.textContent = '\n /* Invert everything except media */\n html {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #1a1a2e !important;\n }\n \n /* Restore images, videos, iframes, canvas */\n img, video, iframe, canvas, svg, picture, [style*=\"background-image\"] {\n filter: invert(1) hue-rotate(180deg) !important;\n }\n \n /* Preserve specific elements that should not be inverted */\n .no-dark-mode, .no-dark-mode *,\n [data-theme=\"light\"], [data-theme=\"light\"],\n .ace_editor, .ace_editor *,\n .CodeMirror, .CodeMirror *,\n .monaco-editor, .monaco-editor *,\n .markdown-body pre, .markdown-body pre *,\n .highlight, .highlight *,\n pre code, pre code * {\n filter: none !important;\n }\n \n /* Fix common UI elements */\n .modal, .popup, .dropdown-menu, .tooltip, .popover {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #2d2d44 !important;\n border-color: #444 !important;\n }\n \n /* Scrollbars */\n ::-webkit-scrollbar { background: #1a1a2e !important; }\n ::-webkit-scrollbar-thumb { background: #444 !important; }\n ::-webkit-scrollbar-thumb:hover { background: #555 !important; }\n \n /* Selection */\n ::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ';\n }\n \n function removeDarkMode() {\n var style = document.getElementById('universal-dark-mode-style');\n if (style) style.remove();\n }\n \n // Toggle with Alt+Shift+D\n document.addEventListener('keydown', function(e) {\n if (e.altKey && e.shiftKey && e.key === 'D') {\n e.preventDefault();\n enabled = !enabled;\n if (enabled) {\n applyDarkMode();\n console.log('[Universal Dark Mode] Enabled');\n } else {\n removeDarkMode();\n console.log('[Universal Dark Mode] Disabled');\n }\n }\n });\n \n // Apply on load\n applyDarkMode();\n \n // Re-apply on dynamic content\n var observer = new MutationObserver(function(mutations) {\n if (enabled && !document.getElementById('universal-dark-mode-style')) {\n applyDarkMode();\n }\n });\n observer.observe(document.head, { childList: true });\n \n console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');\n})();", "Universal Dark Mode");
}
} catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); }
})();
})();

Skip to content

This repository was archived by the owner on Sep 16, 2020. It is now read-only.

BranchesTags
Repository files navigation
Custom Elements V0 API
A cross browser document.registerElement without built-in extends.
donateLicense: ISC
How to use it
Simply include the polyfill on top of your page and use document.registerElement(name, info) like the good old days.
<scriptsrc="https://unpkg.com/ce-v0@latest/min.js"></script>
Compatibility
Same compatibility of original polyfill: every Mobile and Desktop browser.
You can verify your browser compatibility live.
V0 API
varMyElement=document.registerElement('my-element',{prototype: Object.create(HTMLElement.prototype,{createdCallback: {value: function(){console.log('custom element ready/upgraded');// better than V1 constructor() {}// because the element here will always// be already upgraded}},attachedCallback: {value: function(){console.log('custom element connected');// same as connectedCallback}},detachedCallback: {value: function(){console.log('custom element disconnected');// same as disconnectedCallback}},attributeChangedCallback: {value: function(name,oldValue,newValue){console.log('*any* attribute change');// different from V1 in two ways:// * it does not trigger twice with same attribute value// * it triggers for any attribute change, no need// to define static get observedAttributes() {[...]}}}})});// example via createElementdocument.body.appendChild(document.createElement('my-element'));// using the class directlydocument.body.appendChild(newMyElement);
No extends will be performed, create extends from your own classes if needed (i.e. from MyElement.prototype).
Why resurrecting a deprecated API?
TL;DR with native V1 API available it's easy to re-create V0 behavior keeping performance while it's not true the other way around.
This projects solves all transpilations and compatibility issues, providing a reliable, battle tested, V0 API for every browser.
To know more, please read the related blog entry.
Still future friendly!
By no means this project wants to stop adoption or usage of V1 API, quite the opposite, it's waiting for the time where every browser ships it natively, and every part of V0 related code can be dropped to make it a 1KB downgrade fully based on V1, like it is already for both Chrome and Safari.
Don't you like it? Use Component
constMyElement=newComponent({// the Custom Element namename: 'my-element',// one or more static propertystatic: {TEST: 123,method(){}},// alias for createdCallback// the component is ready/upgraded hereconstructor(){},// alias for attributeChangedCallbackonattribute(){},// alias for attachedCallbackonconnected(){},// alias for detachedCallbackondisconnected(){}// any other prototype definition is allowed// including getters and setters});
Component Caveats
If you use static methods / properties inside methods you need to define your components upfront.
About
Custom Elements V0 API
Resources
Readme
ISC license
Activity
Stars
18 stars
Watchers
1 watching
Forks
1 fork
Report repository
Releases
Packages
Used by
Contributors
Languages