@webtides/element-js 1.0.0-alpha.8 → 1.0.0-alpha.9

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@webtides/element-js",
-	"version": "1.0.0-alpha.8",
+	"version": "1.0.0-alpha.9",
 	"module": "index.js",
 	"main": "index.js",
 	"type": "module",

package/src/BaseElement.js

@@ -10,6 +10,7 @@ export { toString } from './util/toString.js';
  * @typedef {Object} BaseElementOptions
  * @property {boolean} [autoUpdate] - When set to true the element will call the requestUpdate() method on the instance every time a property or attribute was changed. This will re-evaluate everything on the element and trigger a re-render (if a template is provided) and trigger the watchers for the affected properties/attributes. Default is `true`
  * @property {boolean} [deferUpdate] - When set to true the element will not call the requestUpdate() method upon connecting and therefore will not render (if template was provided) initially. Default is `true`
+ * @property {boolean} [deferConnected] - When set to true the element will skip the initialization in connectedCallback() before connecting and therefore will not render (if template was provided) or hydrate initially. Default is `false`
  * @property {MutationObserverOptions} [mutationObserverOptions]
  * @property {PropertyOptions} [propertyOptions]
  */
@@ -69,13 +70,6 @@ class BaseElement extends HTMLElement {
 			propertyOptions: {},
 			...options,
 		};
-
-		if (this.hasAttribute('defer-update')) {
-			this._options.deferUpdate = true;
-		}
-		if (this.hasAttribute('defer-connected')) {
-			this._options.deferConnected = true;
-		}
 	}
 
 	/**
@@ -84,8 +78,13 @@ class BaseElement extends HTMLElement {
 	 * register observers, refs and events.
 	 */
 	connectedCallback() {
-		if (this._options.deferConnected) {
+		if (this.hasAttribute('defer-update')) {
+			this._options.deferUpdate = true;
+		}
+
+		if (this.hasAttribute('defer-connected') || this._options.deferConnected) {
 			this._options.deferConnected = false;
+			this.removeAttribute('defer-connected');
 			return;
 		}
 
@@ -111,7 +110,7 @@ class BaseElement extends HTMLElement {
 		// define everything that should be observed
 		this.defineObserver();
 
-		if (this.hasAttribute('defer-update') || this._options.deferUpdate) {
+		if (this._options.deferUpdate) {
 			// don't update/render, but register refs and events
 			this.registerEventsAndRefs();
 

package/src/StyledElement.js

@@ -92,7 +92,9 @@ class StyledElement extends BaseElement {
 		const parentDocument = getShadowParentOrBody(this.getRoot());
 
 		const adoptGlobalStyleSheets =
-			this._options.shadowRender && this._options.adoptGlobalStyles !== false && parentDocument !== document.body;
+			this._options.shadowRender &&
+			this._options.adoptGlobalStyles !== false &&
+			parentDocument !== globalThis.document.body;
 
 		const appendableStyles = [
 			...(adoptGlobalStyleSheets ? globalStylesStore.getGlobalStyleSheets(this._options.adoptGlobalStyles) : []),

package/src/TemplateElement.js

@@ -24,8 +24,15 @@ class TemplateElement extends StyledElement {
 			...options,
 		});
 		this._template = this._options.template;
+	}
 
+	/**
+	 * Overrides the native `connectedCallback` of the HTMLElement to set up and initialize our element.
+	 * This will attach a shadow DOM if the element is supposed to render in shadow DOM.
+	 */
+	connectedCallback() {
 		if (this._options.shadowRender) this.attachShadow({ mode: 'open' });
+		super.connectedCallback();
 	}
 
 	/**

package/src/util/GlobalStylesStore.js

@@ -50,15 +50,11 @@ class GlobalStylesStore extends Store {
 			let cssStyleSheet = this.globalStyleSheetsCache.get(styleSheet.ownerNode);
 			if (!cssStyleSheet) {
 				cssStyleSheet = new CSSStyleSheet();
-				let cssText = '';
 				if (styleSheet.ownerNode.tagName === 'STYLE') {
-					cssText = styleSheet.ownerNode.textContent;
+					cssStyleSheet.replaceSync(styleSheet.ownerNode.textContent);
 				} else if (styleSheet.ownerNode.tagName === 'LINK') {
-					cssText = Array.from(styleSheet.cssRules)
-						.map((rule) => rule.cssText)
-						.join('');
+					Array.from(styleSheet.cssRules).map((rule) => cssStyleSheet.insertRule(rule.cssText));
 				}
-				cssStyleSheet.replaceSync(cssText);
 			}
 			cssStyleSheets.push(cssStyleSheet);
 		});