mirror of
https://github.com/Polymer/polymer.git
synced 2025-02-25 18:55:30 -06:00
8b5803c293
Use <template>.innerHTML when adding test elements to main document. Works around a template polyfill issue (https://github.com/webcomponents/template/issues/40) by setting innerHTML on a <template> element so that inner templates are correctly updated.
32 lines
581 B
JavaScript
32 lines
581 B
JavaScript
import { Polymer } from '../../lib/legacy/polymer-fn.js';
|
|
|
|
const $_documentContainer = document.createElement('template');
|
|
|
|
$_documentContainer.innerHTML = `<custom-style>
|
|
<style is="custom-style">
|
|
html {
|
|
--cs-blue: {
|
|
border : 8px solid blue;
|
|
};
|
|
}
|
|
</style>
|
|
</custom-style>
|
|
<dom-module id="x-client">
|
|
<template>
|
|
<style>
|
|
:host {
|
|
display: inline-block;
|
|
border : 4px solid red;
|
|
@apply (--cs-blue);
|
|
}
|
|
</style>
|
|
x-client
|
|
</template>
|
|
</dom-module>`;
|
|
|
|
document.body.appendChild($_documentContainer.content);
|
|
|
|
Polymer({
|
|
is: 'x-client'
|
|
});
|