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.
Related
I am trying to use defineCustomElement from Vue 3 to make Single File Components into custom elements.
However when I try to import a local stylesheet to the elements I get the error message: Refused to apply style from 'http://localhost:8081/assets/styles.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
I have created a basic Vue 3 project as per these instructions.
In my main.js file I have
import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')
import { defineCustomElement } from 'vue'
import HelloWorld from './components/HelloWorld.ce.vue'
const HelloWorldElement = defineCustomElement(HelloWorld)
customElements.define('hello-world', HelloWorldElement)
and in HelloWorld.ce.vue I have added:
<style>
#import url("https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css");
a {
color: #42b983;
}
#import '../assets/styles.css';
</style>
in the index file I have replaced the tapp with my component:
<hello-world></hello-world>
I've also created a basic CSS file under /src/assets/styles.css.
The bootstrap import works, as do CSS rules written directly within the <style> tags. However the imported local stylesheet will not work - I am sure I have the correct path. I have also tried importing it directly into main.js which also doesn't work.
Here is a Code Sandbox with the structure: https://codesandbox.io/s/staging-fire-lox4y9
Is there a way to have one stylesheet that works across multiple custom elements?
I'm making a site with Preact & Tailwind. In the code here (I know it doesn't have head, body, e.t,c but that isn't relevant to the code):
<script src="https://unpkg.com/tailwindcss-jit-cdn"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/preact/10.11.2/preact.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/htm/3.1.1/htm.js"></script>
<script>
htm.bind(h)
let component = htm`<p>Hello World</p>`
</script>
htm and h are parts of the Preact and HTM cdn. How do I get htm and h from the preact/htm cdns?
I don't want to use a node_modules, as i want it to be a copypastable template html to use anywhere, like WordPress, replit, codepen, e.t.c. I also don't want to use as the way my code is setup it would look weird and bad to read.
Adding a dependency (or dependencies) via <script> adds those to the global scope. h, in the example above, is undefined as you have not specified where it comes from.
<script src="https://unpkg.com/tailwindcss-jit-cdn"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/preact/10.11.2/preact.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/htm/3.1.1/htm.js"></script>
<script>
let html = htm.bind(preact.h)
let component = html`<p>Hello World</p>`
</script>
(Adjusted code, as htm.bind alone will not work. Need to assign & use the result).
This, however, is less than ideal in the modern age of ESM. Messing with globals is just rather unnecessary. Instead, use the following:
<script src="https://unpkg.com/tailwindcss-jit-cdn"></script>
<script type="module">
import { h } from 'https://cdn.skypack.dev/preact';
import htm from 'https://cdn.skypack.dev/htm';
let html = htm.bind(h);
let component = html`<p>Hello World</p>`;
</script>
Or, even better yet, use htm/preact export to skip manually binding altogether:
<script src="https://unpkg.com/tailwindcss-jit-cdn"></script>
<script type="module">
import { html } from 'https://cdn.skypack.dev/htm/preact';
let component = html`<p>Hello World</p>`;
</script>
Unpkg has a number of issues (very difficult to fix, if not impossible. Not a criticism, unpkg was built in a different time) regarding ESM usage, specifically for Preact, resolving package.json "exports" and sometimes duping the Preact instance. This is an issue for hooks, as they require a singleton by design. This is why I'd recommend Skypack or esm.sh. They're built for ESM and work brilliantly.
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 just getting started with building web-components with polymer, and was following the tutorial.
I'm just at the start, and am adding my component to my page via a script, but my html from my template isn't being displayed.
Here's what I've got so far.
document.addEventListener("DOMContentLoaded", function() {
if(!window.Polymer){
var poly = document.createElement('script');
poly.src = "http://cdnjs.cloudflare.com/ajax/libs/polymer/0.3.4/platform.js";
document.head.appendChild(poly);
}
var template = document.createElement('link');
template.setAttribute("rel", "import");
template.setAttribute("href", "http://localhost:8081/first-widget.html");
document.body.appendChild(template);
var widget = document.createElement('my-widget');
document.body.appendChild(widget);
setTimeout(function(){
Polymer('my-widget');
},1000);
});
My widget is
<polymer-element name="my-widget">
<template>
<h1>This is from the Polymer</h1>
</template>
</polymer-element>
My understanding is that this should display the content of my html from the template in my my-widget tag. I've got the localhost:8081 serving the content of the template via CORS, so that isn't the issue, and I can see the template loaded into chrome via the element inspector. So I'm not sure why I'm not getting my content.
Is there a way I need to bootstrap polymer?
In your widget, you need to import polymer.html and either use the noscript attribute:
<link rel="import" href="path/to/polymer.html">
<polymer-element name="my-widget" noscript>
<template>
<h1>This is from the Polymer</h1>
</template>
</polymer-element>
or register your element:
<link rel="import" href="path/to/polymer.html">
<polymer-element name="my-widget">
<template>
<h1>This is from the Polymer</h1>
</template>
<script>
Polymer({});
</script>
</polymer-element>
More information on creating elements: http://www.polymer-project.org/docs/start/creatingelements.html
You'll need to run your html into a server.
I'm using http-server that is very simple.
npm install http-server
Basically you navigate through to index.html file and run "http-server".
Hope it helps
It turns out I was including the platform.js but not polymer.js
If anybody is loading polymer dynamically as I am (as we're building a widget which other people can include in their page), it seems it is best to use the noscript attribute as #pikanezi described, as you don't run into timing issues this way.
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.