Can Polymer extend Electron's webview component? - polymer

In Electron (Atom-Shell), I'm trying to use Polymer 0.5 to extend Electron's webview tag (to add some custom attributes while retaining all of webview's methods). But I'm getting a NotSupportedError when I try to use my custom component. Is there a way to make this work?
Here's how I'm extending the webview:
<polymer-element name="my-webview" extends="webview">
<script>
Polymer({
// I'll add some custom attributes later
});
</script>
</polymer-element>
But when I try to use my-webview (either of these ways):
<my-webview src="http://example.com"></my-webview>
<webview is="my-webview" src="http://example.com"></webview>
...I get this error:
Uncaught NotSupportedError: Failed to execute 'registerElement' on
'Document': Registration failed for type 'my-webview'. The tag name
specified in 'extends' is a custom element name. Use inheritance
instead.
Now, it's true that Electron's webview is indeed a custom element. But Polymer happily extends other custom elements, right?
It seems like one problem might be that "webview" doesn't have a '-' in its name, so Polymer's findTypeExtension doesn't realize it's a custom element.
Is there any way to work around this and convince Polymer that webview needs to be extended through inheritance, like other custom elements?

Related

'dialog' is not a known element in Angular 9 with Ivy

After upgrading to Angular RC.3 and switching to Ivy in a project I get the following error:
Error: dialog is not a known element: 1. If dialog is an Angular component, then verify that it is part of this module. 2. To allow any element add NO_ERRORS_SCHEMA to the #NgModule.schemas of this component.
Indeed I have a markup like this using a <dialog>-element:
<dialog [attr.open]="open ? '' : null"></dialog>
Even though the browser coverage is not 100% dialog is still a valid HTML element.
Did they miss to support it? Is this a bug in Anglaur or Ivy? Can I only use the dialog-element, when I also use NO_ERRORS_SCHEMA in the components?*
* Which I actually don't want to activate.

What is 'data-widgetvar' attribute defined in <div> of xhtml Primefaces page

In xhtml Primefaces page, I search to get a widget's reference that represents a specific DialogFrameWork widget.
The problem is that this widget is generated dynamically using some Java code on J2EE JSF server and is not defined directly in xhtml file.
The only solution I see is to inspect the DOM after DialogFrameWork has been loaded.
Primefaces seems to generate a element in DOM.
Using JQuery, I can find this element.
In this element there exist 2 custom attributes that are
data-widgetvar
data-pfdlgcid
What are these attributes ?
Can I use them to get PrimeFaces widget ?
How ?
data-widgetvar attribute of DialogFrameWork widget represent a reference and can be used to get widget variable.
example:
jQuery(".ui-dialog.ui-overlay-visible",window.parent.document)
.each
(function(nIndex)
{
var sWidgetName = $(this).attr('data-widgetvar');
var wgDialog = window.parent.PF(sWidgetName);
wgDialog.hide();
});

HTML Imports with the Async flag - strange behaviour in Chrome

I am trying to optimise the loading of Polymer Elements in my Polymer based web app. In particular I am concentrating my effort around the initial start up screens. Users will have to log on if they don't have a valid jwt token held in a cookie.
index.html loads an application element <pas-app> which in turn loads an session manager (<pas-eession>). Since the normal startup will be when the user is already logged on the element that handles input of user name and password (<pas-logon>) is hidden behind a <template is="dom-if"> element inside of <pas-session>and I have added the async flag to its html import line in that element as well - thus :
<link rel="import" href="pas-logon.html" async>
However, in chrome (I don't experience this in firefox, where html imports are polyfilled) this async seems to flow over embedded <script> element inside the custom element. In particular I get a type error because the script to cause it to be regestered as a custom element thinks Polymer is not a function.
I suspect I am using the wrong kind of async flag - is there a way to specify that the html import should not block the current element, but should block the scripts inside itself when loaded.
I think I had the same problem today and found this question when searching for a solution. When using importHref async I get errors like [paper-radio-button::_flattenBehaviorsList]: behavior is null, check for missing or 404 import and dependencies are not loaded in the right order. When I change to async = false the error messages are gone.
It seems that this is a known bug of Polymer or probably Chrome https://github.com/Polymer/polymer/issues/2522

How to use x3dom with polymer?

I have a polymer site where I'd like to use the x3dom library to view an external x3d file, and simply be able to rotate the loaded 3D scene 360 degrees.
Has anyone successfully used x3dom with polymer? I don't see any reason why this wouldn't work. Please assume I have all the polymer stuff correct (which I have) and have loaded the prerequisite x3dom.js script and x3dom.css in the head of the page too. This is just a stripped down code snippet to show key bits:
<x3d width='350px' height='400px'>
<scene>
<inline nameSpaceName="myNS" mapDEFToID="true" url="{{_x3dPath}}"></inline>
</scene>
</x3d>
<script>
Polymer({
properties: {
_x3dPath: {type: String},
},
ready: function() {
this._x3dPath = "/someDynamicPath/threeDfile.x3d";
}
});
</script>
Any suggestions?
You need to create a custom element that serves as a wrapper for the 3rd party library. (e.g x3dom-wrapper.html ).
Inside that file, you must add the script reference to x3dom .js
<script type="text/javascript" src='../bower_components/x3dom/x3dom.js'></script>
Then, you need to import the wrapper custom element like any other polymer component. That way you ensure the x3dom dependency will be available when you need it.
Edit:
Wrapping the library is still a good practice but not the cause of your problem. I did a quick test and found that you must call x3dom.reload() on your "ready" polymer event handler. That way x3dom system reloads properly

Uncaught TypeError: this.hoodie.account.signUp is not a function

Why does my element throw the following error when it's served through an iron-component-page element (in a Polymer Seed Element demo), but not when served normally through my app?
Uncaught TypeError: this.hoodie.account.signUp is not a function
The demo is published at http://timblack1.github.io/hoodie-accountbar/components/hoodie-accountbar/.
this.hoodie should be created by hoodie.js, which does load according to Dev Tools' Network tab. But the this.hoodie object doesn't contain as many methods and attributes as it should, including the .account.signUp() method. this.hoodie.account exists, but only as an empty object.
I'm loading hoodie.js via a <script> tag in the hoodie-service element, which is loaded by hoodie-accountbar. Does the iron-component-page element do anything funny when it loads tags in a demo element? Or does hydrolysis?
#scarygami's comment pointed the way to the fix. The problem is that published properties are run through JSON.stringify(), which strips out any methods defined on those published property objects. So I fixed this error by no longer making the hoodie property be a published property on the hoodie-accountbar element. The fix is at https://github.com/timblack1/hoodie-accountbar/commit/db8d3071e4ad53a71b3d0e834075f00967c2e4a4.