I'm having such a hard time trying to use the Polymer.importHref function...
What am I missing?
If you're only importing polymer-element.html, make sure to also import import-href.html:
<link rel="import" href="polymer/lib/utils/import-href.html">
codepen
Related
I am using polymer 2.0 and have found there are two ways of defining or registering a custom element. Could someone elaborate on when it is best to use one method over the other?
Method.1
<link rel="import" href="/bower_components/polymer/polymer-element.html">
<script>
class MyPolymerElement extends Polymer.Element {
...
}
customElements.define('my-polymer-element', MyPolymerElement);
</script>
Method.2
<link rel="import" href="/bower_components/polymer/polymer-element.html">
<script>
(function(){
'use strict';
Polymer({
is: 'my-polymer-element',
});
})()
</script>
If you check the docs here you will see that basically the first option, that uses the class syntax is the Polymer 2 way. The second one you have is also on that page, but under "Define a legacy element", and that is because it's actually the syntax that was used in Polymer 1. It's still being supported and you might want to use it especially if your component uses something built for Polymer 1, like behaviours, that have been replaced by mixins.
Also basically if you're using a transpiler the ES6 class syntax will be turned in to that sort of function. So you can think of the first method as some syntactic sugar that you can use to make things easier to understand.
I'm converting some existing code to use React Router.
The code currently uses <a href="#" ...>, which I am changing to <Link to=??>.
My question is:
What should I use for the "to" parameter? If I use to="#", the application routes to "/", which is not what I want.
It works if I use the current route name, but the whole idea of href="#" is that the code doesn't have to know how it is accessed.
I am using React Router 2 with history=browserHistory.
Here are a few solutions that worked for me:
<Link to={{}}>
to can take an object; sending an empty object stays on the current page
<Link to={{ search: '' }}>
In my specific case, I wanted to stay on the same page but wipe the search params, which is what this does
<Link to={window.location.pathname}>
Similar to the suggestion in Damien Leroux's answer, without the hash
<Link to="#">
This seemed to work fine for me, maybe because I'm using react-router v6
What didn't work for me:
<Link to={this.props.route.path}
I'm using functional components, so I don't have any this.props. Maybe there's another way in the react-router API to get the path.
<Link to=".">
This linked to / for me
For me this was the solution:
I used the npm module react-router-hash-link. It is quite easy to use. Docs here
import { HashLink as Link } from 'react-router-hash-link';
<Link smooth to="/#services">Services</Link>
And wrap your <App> component in <HashRouter> from npm module react-router-dom
stackoverflow answer
I think you could try something more or less like that:
<Link to={window.location.pathname} hash="/#">HASH</Link>
See there : https://github.com/reactjs/react-router/blob/master/docs/API.md#hash
This works because "this.props.route.path" is the route to the current page:
<Link to={this.props.route.path} ...
Note that if you have nested React components, you have to pass "this.path" down from the outer components, as described at https://facebook.github.io/react/docs/transferring-props.html
<Link to='#' />
this works but it will still stack your history
It works for me:
<Link className="dropdown-item" to="javascript:void()">
Link Title
</Link>
If you need to go to a specified section of your "/" path (even from another path), you can make it work with the anchor tag as well, like this:
Go to Section
Hope this helps.
Since I seem to keep having issues with disappearing elements in Polymer...
I have the following files:
pubspec.yaml:
name: photon
dependencies:
polymer:
git:
url: git://github.com/dart-lang/polymer-dart.git
ref: 1.0.0-rc.5
polymer_elements:
git:
url: git://github.com/dart-lang/polymer_elements.git
web_components: ^0.12.0
reflectable: ^0.3.0
transformers:
- web_components:
entry_points:
- web/index.html
- reflectable:
entry_points:
- web/index.dart
web/index.html:
<head>
<link rel="import" href="packages/polymer/polymer.html">
<link rel="import" href="packages/polymer_elements/paper_toolbar.html">
<link rel="import" href="photo_view.html">
</head>
<body>
<paper-toolbar>
<div class="title">Photon</div>
</paper-toolbar>
<photo-view url="abc123"></photo-view>
<script type="application/dart" src="index.dart"></script>
</body>
web/index.dart:
export 'package:polymer/init.dart';
web/photo_view.html:
<dom-module id="photo-view">
<template>
<p>Photo <span>{{url}}</span> goes here with filters
[<span>{{filters}}</span>]</p>
</template>
</dom-module>
web/photo_view.dart:
#HtmlImport('photo_view.html')
library photon.photo_view;
import 'package:polymer/polymer.dart';
import 'package:web_components/web_components.dart' show HtmlImport;
#PolymerRegister('photo-view')
class PhotoView extends PolymerElement {
PhotoView.created() : super.created();
#Property(notify: true)
String url;
}
Based on the documentation I have found for Polymer.dart 1.0, this should work. Only issue is, the photo-view simply doesn't appear. At all. All I see is the toolbar. Unlike the last time this happened, rearranging the elements in index.html doesn't do a thing. I have tried:
Importing photo_elements.dart from index.dart.
Rearranging various imports and nodes in index.html.
Explicitly adding <script type="application/dart" src="photo_view.dart"></script> to photo_view.html.
None of them do anything. I even tried deleting the build and packages directories and re-running pub get and pub build.
If I open up build/web/index.html, I can see that none of the registration code from photo_view.dart is added. In fact, nothing from photo_view.dart is present. Could this be part of the issue?
I changed index.dart to
import 'photo_view.dart';
import 'package:polymer_elements/paper_toolbar.dart';
export 'package:polymer/init.dart';
/// Silence analyzer [PhotoView], [PaperToolbar]
const _silence = 0;
And it worked.
The last two lines are only to prevent "unused import hints" from the Dart analyzer.
If you are using <link rel="import"> style imports in your html (instead of dart imports in your dart file) then you will need to change your reflectable transformer configuration a bit:
- reflectable:
entry_points:
- web/index.bootstrap.initialize.dart
This is because the index.dart file can't reach the dart files which appear inside the html imports. The bootstrapped file however does contain all the necessary imports.
In general though it is encouraged to use dart imports instead of html imports.
I just started using polymer for creating web-components.
When I import only one custom element everything is fine.
Now I want to use the polymer element iron-collapse in my custom web component and I want to import both of them in my HTML.
<link rel="import" href="../custom-accordion.html">
<link rel="import" href="../bower_components/iron-collapse/iron-collapse.html">
Both of the elements are positioned inside a dom-module Tag in their files:
<dom-module id="custom-accordion">
....content
</dom-module>
and
<dom-module id="iron-collapse">
....content
</dom-module>
When I want to import both I get the error :
Uncaught NotSupportedError: Failed to execute 'registerElement' on 'Document': Registration failed for type 'dom-module'. A type with that name is already registered.)
I think I have to use this dom-module tag in both, otherwise I can't create my web-component. Right?
Any ideas how to solve this issue?
dom-module is Polymer. The issue is polymer is running twice and trying to register dom-module element. In your code you are just using the dom-module element.
I am not sure how you are running your solution. Try below and see if it works
If you have included polymer in index.html, try removing it.
Try using polymer-starter-kit as your start. It takes care of most of these issues and comes packed with all the tools required to build a production ready polymer application. You can just focus on your code.
Do you have a Polymer-element in a script-tag inside your dom-module? You need to rename this as well :
<dom-module id="**yourElementName**">
<template>
[...]
</template>
<script>
Polymer({
is: "**yourElementName**",
[...]
})
</script>
</dom-module>
I'm building an application with Polymer, and I'm having trouble creating my own component. The component I'm building is a login prompt.
<link rel="import" href="/static/bower_components/polymer/polymer.html">
<link rel="import" href="/static/bower_components/paper-button/paper-button.html">
<link rel="import" href="/static/bower_components/paper-input/paper-input.html">
<polymer-element name="login-prompt" attributes="">
<template>
<paper-input label="Email"></paper-input>
<paper-input label="Password" type="password"></paper-input>
<paper-button label="Login" affirmative></paper-button>
</template>
<script>
Polymer({});
</script>
</polymer-element>
But the moment I import more than one dependency (in this case paper-button and paper-input, I get this error in the console:
Error: DuplicateDefinitionError: a type with name 'core-meta' is already registered
It's coming from platform.js. Why is this error appearing? The demos in the documentation work exactly the same, but they behave normally.
Edit: Updated to load with absolute URLs, but I'm still getting the same error.
All righty, I figured it out. In my layout file, I was importing core-component-page. That file contains a definition for core-meta, along with some other elements that are already satisfied dependencies. I'm not sure why I had that in there, but I'd sure like to know what core-component-page is, and why it exists.