shadow-dom

Best way to pass/receive data to/from other sibling components?

由 拜拜、爱过 提交于 2020-06-23 15:57:11
问题 Recently I am trying to learn web components/custom elements and I have came across with a problem and that is pass/receive data to/from other sibling components, I have tried using custom event to do the data passing and receiving but sometimes in some situations, custom event is not really the best way to do it, so what my question is other than custom events, is there any other ways I can pass/receive data to/from other sibling components? index.html <body> <my-component-one></my-component

How to listen for custom events defined web component

由 不问归期 提交于 2020-06-09 11:36:05
问题 I have a custom element my-checkbox that wraps a checkbox, label, styling, etc. When that checkbox is toggled I am defining a CustomEvent named check within my constructor, like so: constructor(){ super(); this._shadowRoot = this.attachShadow({mode: 'open'}); this.checkEvent = new CustomEvent("check", { bubbles: true, cancelable: false, }); } I dispatch that event when the checkbox is toggled: toggleCheckbox(){ this.dispatchEvent(this.checkEvent); console.log(this.checkEvent); ... } I infer

:host-context not working as expected in Lit-Element web component

由 会有一股神秘感。 提交于 2020-06-01 07:39:06
问题 I've got two Lit-element web components - one is units-list , which contains many units-list-item elements. The units-list-item elements have two different display modes: compact and detailed. Because the list element supports infinite scroll (and thus could contain several thousand units), we need any mechanism that toggles between the two modes to be as performant as possible. That's why I thought an ideal solution would be to use the :host-context() pseudo-selector in the styles for the

Selecting slot text in Custom Element Shadow DOM

由 匆匆过客 提交于 2020-05-27 05:21:45
问题 I made a simple copy-paste component with regular html/css/js. I've tried to turn it into a web component and can no longer get the copy-paste behaviour to work. The markup inside the shadow DOM is basically <span contenteditable="true"> <slot></slot> </span> <button>Copy</button> The Javascript: class CopyPaste extends HTMLElement { constructor() { super(); let shadowRoot = this.attachShadow({mode: 'open'}); shadowRoot.appendChild(copyPasteTemplate.content.cloneNode(true)); }

:host getting oveerirden by universal selector css

由 ▼魔方 西西 提交于 2020-05-23 21:32:08
问题 We have CSS resets (margin:0px;padding:0px;) in a common style file which we have authored as one component and have included as a part of other components which we are developing. We are using universal selectors like below *,*:before,*:after{ color:pink } On each of our component we have a :host style with which we are trying to override this color :host{ color:yellow } As we expect :host to have more specificity over universal selector strangely this is not the case. universal selector

Using existing CSS selectors to apply styles across the Shadow DOM to custom elements

由 那年仲夏 提交于 2020-05-17 07:42:07
问题 This question likely has no single direct answer, but hopefully will lead to some best practices or common patterns to use when adapting an existing styles framework to new web component development. For my case, I have a component <custom-avatar> , and it's all set up properly with self-contained styles and functionality, everything is just peachy. In certain use cases, the application display needs to stack avatars, just one slightly overtop one other at a diagonal, and the pattern I'm

ShadowRoot property is null despite open

由 大憨熊 提交于 2020-05-15 11:18:19
问题 I'm trying to access the ShadowRoot on my element and the property element.shadowRoot is returning null . The ShadowDOM is defined as mode: 'open' , which is correct, I can even console.log(element) to see all of the properties and shadowRoot IS an object of ShadowRoot type. In my app I am trying to access the property like so: let el = document.getElementById('elementId'); ... console.log(el); console.log("this.shadowRoot = ???"); console.log(el.shadowRoot); Is this okay? Attached are the

Use CSS selectors like :first-child inside shadow dom

由 旧街凉风 提交于 2020-04-30 06:32:45
问题 Is there any way to use css selectors like :first-child, :not(:last-child) inside of the shadow dom? The example is like this CustomElement.html <div id="parent-div> <slot></slot> </div> App.html <div> <custom-element> <div class="heading">Main Heading</div> <div class="item">item 1</div> <div class="item">item 1</div> <div class="item">item 1</div> <div class="heading">Second Heading</div> <div class="item">item 1</div> <div class="item">item 1</div> <div class="item">item 1</div> </custom

Use CSS selectors like :first-child inside shadow dom

由 。_饼干妹妹 提交于 2020-04-30 06:32:05
问题 Is there any way to use css selectors like :first-child, :not(:last-child) inside of the shadow dom? The example is like this CustomElement.html <div id="parent-div> <slot></slot> </div> App.html <div> <custom-element> <div class="heading">Main Heading</div> <div class="item">item 1</div> <div class="item">item 1</div> <div class="item">item 1</div> <div class="heading">Second Heading</div> <div class="item">item 1</div> <div class="item">item 1</div> <div class="item">item 1</div> </custom

Alternatives to Bootstrap JS does not work inside shadow dom

由 二次信任 提交于 2020-04-10 21:07:45
问题 I tried to create a shadow DOM for encapsulating the content Script elements and then apply Bootstrap styles and also make Bootstrap Modal work inside a shadow Dom so it can encapsulate itself from the Webpage styles and Scripts. It is successful in displaying the content but Bootstrap js scripts don't work. I tried injecting all the Styles and Script files inside the Shadow DOM. Bootstrap Styles work, Bootstrap Scripts don't work $(#id) //the usual way to access a id using jQuery
订阅 shadow-dom