native-web-component

How to use child elements in Web Components

由 拈花ヽ惹草 提交于 2019-12-13 18:34:13
问题 I am building vanilla web components for educational purposes. Here is my custom checkbox. class Checkbox extends HTMLElement { constructor() { super(); this.shadow = this.attachShadow({mode:'open'}); this.shadow.innerHTML = "<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><path /></svg><label></label>"; this._checked = false; this.addEventListener("click", this.onClickHandler.bind(this)); } set checked(value) { if(value != this._checked) { this._checked =

Styling descendent element in slotted element

由 谁说我不能喝 提交于 2019-12-11 03:45:55
问题 Is it possible to select descendent element in slotted element? Example like this: ::slotted(div p) { color: blue; } <div><p>test</p><div> It doesn't work 回答1: No, you can only select top-level nodes with ::slotted() . The selector inside ::slotted() can only be a compound selector, so div p is not a valid one. According to Hayato Ito : The reason of this restriction is to make a selector style-engine friendly, in terms of performance. See the styling example in the Shadow Dom v1 presentation

custom web component event call back function in tag

由 戏子无情 提交于 2019-12-10 18:28:08
问题 class UioKey extends HTMLElement { ... eKey(){windows.alert('class eKey function')} } function eKey(){ eKey(){windows.alert('document eKey function')} <template id="uio-key-temp"> <div class="uio-key"> <div class="i" onclick="eKey()"></div><span></span> </div> </template> when clikcing on the .i div agot the document ekey that is firing, i want the class ekey() to be fired if i omit the dodument eKey() fuction i got function eKey() undefined 回答1: onclick will only work with globally defined

CSS: How to target ::slotted siblings in Shadow DOM root?

由 蓝咒 提交于 2019-12-06 11:14:53
I know that the spec currently only allows compound selectors for ::slotted, i.e. ::slotted(my-first + my-second) is not allowed, but should something like this be working? ::slotted(x-first) + ::slotted(x-second) { /* css */ } Is there any way to target slotted siblings (other than with global css)? And if not, where would I file such a request? Thanks. Sure you can select siblings of slots / slotted . The thing you can not do is select a element which has been slotted and is not a top-level node . Select siblings: slot[name=<slotname>] ~ <selector> Select slotted top-level node ::slotted(

Create custom elements v1 in ES5, not ES6

由 |▌冷眼眸甩不掉的悲伤 提交于 2019-12-05 03:20:52
问题 Right now, if you follow the exact specifications of v1 of the custom elements spec, it's not possible to use custom elements in browsers that don't support classes. Is there a way to create v1 custom elements without using the class syntax so that they are fully functional in Chrome, FireFox and IE11. Also, since IE11 doesn't have native support for custom elements, I'm assuming we will probably need to use some pollyfills, so what polyfills or libraries do we need in order to make this work

can i pass function as attribute to web component?

由 谁说胖子不能爱 提交于 2019-12-04 03:56:33
I'm trying to create a native web component for input element. I wanted the component to have custom validation functionality, similar to polymer's paper-input custom validator function. I'm not sure if I can pass a custom validator function as attribute to an instance of (web component) input element. Any suggestions would be appreciated. An attribute is a string, not a function. You can pass a a function as a string and then evaluate it with the eval() function. It's not considered as a good practice, for security reasons. Another solution is to pass it to the custom element as a Javascript

Why does my Web Component CSS not show? I am not using shadowDOM

由 北城余情 提交于 2019-12-02 17:07:35
问题 I have a Native V1 component that is not using shadowDOM so I place my CSS in the <head> . But when someone else uses my component my CSS no longer works. This only happens if their component does use shadowDOM. Example Code for my component: class MyEl extends HTMLElement { constructor() { super(); } connectedCallback() { this.innerHTML = `<div class="spaced"><button class="happy-btn">I'm Happy</button></div> <div class="spaced"><button class="sad-btn">I'm Sad</button></div>`; } } // Define

Why does my Web Component CSS not show? I am not using shadowDOM

由 穿精又带淫゛_ 提交于 2019-12-02 10:28:50
I have a Native V1 component that is not using shadowDOM so I place my CSS in the <head> . But when someone else uses my component my CSS no longer works. This only happens if their component does use shadowDOM. Example Code for my component: class MyEl extends HTMLElement { constructor() { super(); } connectedCallback() { this.innerHTML = `<div class="spaced"><button class="happy-btn">I'm Happy</button></div> <div class="spaced"><button class="sad-btn">I'm Sad</button></div>`; } } // Define our web component customElements.define('my-el', MyEl); button { padding: 8px 20px; } .happy-btn {

Custom Element getRootNode.closest() function crossing multiple (parent) shadowDOM boundaries

由 ▼魔方 西西 提交于 2019-12-02 08:28:10
问题 I spent some time searching but have only seen too many regular "walk the DOM" blogs or answers that only go one level UP with getRootnode() Pseudo code: HTML <element-x> //# shadow-root <element-y> <element-z> //# shadow-root let container = this.closest('element-x'); </element-z> </element-y> </element-x> The standard element.closest() function does not pierce shadow boundaries; So this.closest('element-x') returns null because there is no <element-x> within <element-z> shadowDom Goal: Find

How to communicate between Web Components (native UI)?

由 那年仲夏 提交于 2019-12-01 21:28:50
I'm trying to use native web components for one of my UI project and for this project, I'm not using any frameworks or libraries like Polymer etc. I would like to know is there any best way or other way to communicate between two web components like we do in angularjs/angular (like the message bus concept). Currently in UI web-components, I'm using dispatchevent for publishing data and for receiving data, I'm using addeventlistener . For example, there are 2 web-components, ChatForm and ChatHistory. // chatform webcomponent on submit text, publish chattext data this.dispatchEvent(new
订阅 native-web-component