custom-element

Howto do something when an attribute changes in svelte

由 喜夏-厌秋 提交于 2019-12-13 03:09:50
问题 Creating a web component using svelte, I need to run some code when an attribute of the component is changed. What I have come up with is the following pattern. <script> export let test = "default value"; $: { testIsChanged(test); } function testIsChanged(newValue) { console.log(newValue); } </script> The value of test is {test} Is this the way to do it? Or am I missing something? 回答1: That will indeed work, as you can see in this REPL 来源： https://stackoverflow.com/questions/57976936/howto-do

Identifying a Customized Built-In Element without an is= attribute

由 寵の児 提交于 2019-12-13 01:29:04
问题 In my Chessly.github.io project I use Customized Built-In IMG Elements to define SVG chesspieces: Question: How can I distinguish a regular IMG from a customized IMG? document.body.append( document.createElement("IMG", { is: "white-queen" }); ); This creates a chesspiece, but does not set the is= attribute I now explicitly set the is= attribute myself, but since this attribute does nothing and can be set to any value (I use is as an observed attribute in my Custom Element code) it is not a

How to extend an existing custom element?

由 放肆的年华 提交于 2019-12-12 16:16:21
问题 I have a custom element, called x-foo . I would like to extend it, and create an x-foo-extended element, but it doesn't works. I get this error: Uncaught NotSupportedError: Failed to execute 'registerElement' on 'Document': Registration failed for type 'x-foo-extended' . The tag name specified in 'extends' is a custom element name. Use inheritance instead. var xFooExtendedProto = Object.create(xFoo.prototype); xFooExtendedProto.someCustomFunc = function() { // ... }; xFooExtended = document

Vanilla Web Component custom event attributes and properties

由 帅比萌擦擦* 提交于 2019-12-12 12:01:35
问题 Using Web Components without any framework, what is the proper way to implement a custom event? For example, say I have a custom element x-pop-out that has a custom event of pop I would want all of the following to work: <x-pop-out onpop="someGlobal.doSomething()"/> var el = document.getElementsByTagName('x-pop-out')[0]; el.onpop = ()=> someGlobal.doSomething(); //or el.addEventListener('pop', ()=> someGlobal.doSomething()); The last one I get how to do, but do I need to custom implement the

Polymer 1.x: Obtaining customStyles property value

由 别等时光非礼了梦想. 提交于 2019-12-12 03:19:42
问题 Here is my jsBin. The parent-element sets the value of the --custom-color property in the child-element . I want to get the value of that property from the JS in the child-element . Here is the documentation but I can not find it mentioned anywhere in there how to do this. Please provide a working example (jsBin) with your answer. <h4>http://jsbin.com/kevanicebu/edit?html,console,output</h4> <link rel="import" href="https://rawgit.com/Polymer/polymer/master/polymer.html"> <dom-module id=

Polymer: Create a “general” custom element

由 …衆ロ難τιáo~ 提交于 2019-12-11 18:01:15
问题 I am attempting to build an element with attributes that would specify which element should take place of this element. I have a 3d-card flip element that I am using fo this purposes in the index.html that is defined as: <html> <head> <script src="bower_components/webcomponentsjs/webcomponents.js"> </script> <link rel="import" href="elements/general-element.html"> </head> <body> <general-element name="card-flip" address="elements/card-flip.html"> <front> FRONT </front> <back> BACK </back> <

How to detect when an Custom Element's is transcluded into a shadow tree?

由 此生再无相见时 提交于 2019-12-11 13:02:08
问题 A Custom Element's attachedCallback can be used to detect an element's original insertion point by looking at, but how do we detect it's final resting point once it has been transcluded into shadow DOM (for example placed inside a <content> or soon <slot> element)? I'm thinking something like a "slottedCallback" which doesn't currently exist. For extra details on why I (might) need this, see https://github.com/w3c/webcomponents/issues/504 EDIT: Answering @Supersharp's question: did you try

How to parse a Google CSE results located on a site in Java?

由 北城余情 提交于 2019-12-11 11:12:57
问题 I want to parse a Custom Search Element JavaScript function. Here's a template of this function https://developers.google.com/custom-search/docs/element#overview. <!-- Put the following javascript before the closing tag. --> <script> (function() { var cx = '123:456'; // Insert your own Custom Search engine ID here var gcse = document.createElement('script'); gcse.type = 'text/javascript'; gcse.async = true; gcse.src = 'https://cse.google.com/cse.js?cx=' + cx; var s = document

CustomElements not working in Firefox with about:config properties enabled

由 拈花ヽ惹草 提交于 2019-12-11 07:23:30
问题 CanIuse says that webcomponents v1 is enabled in Firefox v. 61 with the about:config properties dom.webcomponents.customelements.enabled and dom.webcomponents.shadowdom.enabled set to true. And many posts and articles on the web agree with that. So I have Firefox version 61.0.2 with the aforementioned properties set, and I have a custom element defined as shown below. This renders as expected in Chrome, but in Firefox there is simply nothing rendered and no errors on the console. <template id

Polymer 1.x: How to imperatively (using JS) obtain the value of a custom CSS property?

由 ℡╲_俬逩灬. 提交于 2019-12-11 06:16:45
问题 In the following example, I have a parent custom element calling a child custom element. The child has a variable color CSS property for p elements that can be defined in the parent CSS. In the JS of the child element, I want to read the --custom-color value selected at the parent. In this case, the value is yellow . Put another way: when the getCustomColor() method is run, I want the console log to read "Your custom color is yellow." What JavaScript do I put in the getCustomColor() method to
订阅 custom-element