I want to use x3dom together with my PolymerElements, but if I put the needed x3d tag inside my Polymer.Element, X3Dom states, that no containers are found, because it uses document.getElementsByTagName('X3D');
see here: https://github.com/x3dom/x3dom/blob/652f3d4acd5e9e9f62b3ecdd92dec5e5c8a2fd86/src/Main.js#L25
Is there a way to make dom elements 'public' so that they can be found by libraries like x3dom?
P.S.: A working solution I found is by 'slotting' the element through to the actual destination.
Example:
<body>
<my-custom-element>
<x3d ...> ... </x3d>
</my-customelement>
<script src="x3dom-full.js">
</body>
Works, if I design my Element like this:
<dom-module id="my-custom-element">
<template>
<style></style>
<slot></slot>
</template>
</dom-module>
In case I design my element like this:
<dom-module id="my-custom-element">
<template>
<style></style>
<x3d></x3d>
</template>
</dom-module>
x3dom cannot find it, even if the script tag for x3dom-full.js lies inside the template tag.
The reason I do not prefer the slot tags is that I want to hide the x3dom functionality inside my custom element.
Related
I want to figure out a way to insert HTML inside a <sly data-sly-resource> tag and be able to go inside the component I am retrieving from the resource attribute.
To compare, it would be something like Vue's slots, and React's { this.props.children }.
Example:
Parent Component
<sly data-sly-resource="${'example' # resourceType='path/to/component/structure/example'}">
<h1>Hello World</h1>
</sly>
Example Component
<div id="example-component">
${ variable.getChildrenHTMLCall() } // Does something like this exist?
</div>
Output
<div id="example-component">
<h1>Hello World</h1>
</div>
This functionality does not exist.
You could make a similar functionality by using data-sly-template. But you’d have to pass the HTML sting as a parameter (more specifically option) but that might not be desired or maintainable.
You could use the com.day.cq.contentsync.handler.util.RequestResponseFactory as seen here: http://www.nateyolles.com/blog/2015/10/get-rendered-html-for-an-aem-resource-or-component
quick question. When publishing an element to webcomponents.org, many elements have a nice demo, which you can open on the side and preview the element.
I created a demo for my element in demo/index.html but I can't figure out how to link this page properly for webcomponents.org to recognize.
I tried replicating the entire structure of the polymer/paper-button element, but it didn't work.
I'm using the Polymer 2.0 preview and the iron-demo-helpers to format the example.
Any ideas?
Thanks!
in your bower.json you can provide multiple demos via
"demos": {
"Demo": "demo/index.html"
},
for the inline demo you can add something like this to your README.md
## Demo
<!---
```
<custom-element-demo>
<template>
<script src="../webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="grain-read-more.html">
<next-code-block></next-code-block>
</template>
</custom-element-demo>
```
-->
```html
<grain-read-more>
<h3>Read More</h3>
<div slot="more">
The Content is only visible if grain-read-more is opened
</div>
</grain-read-more>
```
I am working on a set of Polymer elements (buttons in this particular case) some of which should re-use the same HTML snippet. A structure for a custom button is as follows:
...
<link rel="import" href="button-base.html" id="content">
<link rel="import" href="styles.html">
<link rel="import" href="behavior.html">
<dom-module id="dg-button">
<template>
<style include="button-styles"></style>
<!-- HERE I want the content of button-base.html -->
</template>
<script>
Polymer({
is: 'custom-button',
behaviors: [DG.ButtonBehavior]
});
</script>
</dom-module>
Styles and behavior work as they should.
The problem is: I am not sure how to get content of button-base.html into the specified place of the local DOM without defining button-base as yet another element and then using it as <button-base></button-base>.
The reasons I want to avoid converting it to the new element are:
I want the content of button-base to be a first-class citizen of the custom-button element's local DOM so that all the methods defined in the behavior would still apply using just this.myMethod() for buttons that do not import button-base and rather use custom local DOM.
I need to be able to declaratively set properties on this new custom-button so that they get reflected on DOM elements within button-base.html automatically.
For example, the content of the button-base.html is as follows:
<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../bower_components/paper-button/paper-button.html">
<paper-button id="internalButton" raised$="[[raised]]">
<span id="defaultContent">
<content></content>
</span>
</paper-button>
I would like to set raised on my custom-button in a way that it gets mapped to paper-button automatically without proxying all of the possible attributes through a new element (in case I define base-button as a new element and import it as <base-button></base-button> in custom-button).
Any ideas on how to make this import work?
I have a polymer element <my-element> with a computed property myProperty. I need to bind myProperty to another place in the HTML page, so I can't put it inside a dom-bind template
Here's what I mean
<html>
<body>
<div>
<my-element my-property="{{myProperty}}"></my-element>
</div>
<!--somewhere deep inside another part of the document-->
<div>
<h4>myProperty = </h4><span>[[myProperty]]</span>
<div>
</body>
</html>
I cannot wrap my-element and the usage of [[myProperty]] in a dom-bind template as this would result in nearly the entire document being enclosed in this. Attempting to use the bind as it is results in myProperty = [[myProperty]] being displayed, not the value of [[myProperty]].
Is there some way to have behaviour similar to data binding but usable across the whole HTML document? (In the future there might also be a case where [[myProperty]] is used inside an attribute such as <my-second-element my-property="[[myProperty]]">). Or if both occurences are wrapped individually in dom-bind templates is there some way to make the bind global?
Thanks in advance
Not sure why you wouldn't be able to do like this:
<head>
...
<script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
...
</head>
<html>
<body>
<template is="dom-bind" id="app">
<div>
<my-element my-property="{{myProperty}}"></my-element>
</div>
<!--somewhere deep inside another part of the document-->
<div>
<h4>myProperty = </h4><span>[[myProperty]]</span>
<div>
</template>
</body>
</html>
This is totally doable. If myProperty changes inside my-element it would also change in "this" html-document. There also wouldn't be a problem adding your second element:
<my-second-element my-property="[[myProperty]]">
Unless you're missing to tell us some specific behavior that you want, this should be what you want. :)
I have a jQuery template, and I would like to use a KnockOutJS template within this.
I cannot make this work as this example illustrates: http://jsfiddle.net/maate/bwmcR/1/.
However, it DOES work when the KnockOutJS template itself is placed outside the scope of the jQuery template as in this example: http://jsfiddle.net/maate/bwmcR/2/.
It seems that the problem is related to the scope of the template data variables (for instance, I can access the ${test} variable within the subTemplate).
Does anyone know how to make this work?
Br. Morten
The first example you have is just not valid. Although you want to create a sub-template it has to be in a separate script tag. You just can't embed templates within each other, you have to create them one after the other.
WRONG:
<script id="superTemplate" type="text/html">
...
<script id="subTemplate" type="text/html">
...
</script>
</script>
RIGHT:
<script id="superTemplate" type="text/html">
...
</script>
<script id="subTemplate" type="text/html">
...
</script>
When you applied the subtemplate on the ul, you defined what data it should be using with the foreach, so you won't be able to read the test as it is not a property on an item.
If you want you can pass it as a templateOption so it will be available on the subtemplate too.
<ul data-bind="template: { name: 'subTemplate', foreach: items, templateOptions: { testValue: 'Value' } }"></ul>
This way it will be available on the subtemplate.
<span data-bind="text: $item.testValue"></span>
Also, I wouldn't use the default jQuery template tags, it is much nicer with data-binding.
<div id="body" data-bind="template:{name: 'superTemplate'}"></div>
It will do the same, more or less, in the end. You can take a look here : http://jsfiddle.net/bwmcR/18/