We Keep Coding

Is it possible to emulate v-model input behaviour on a paragraph tag?

Solution:
Thanks to #Jeronimas I figured out how to use dynamic components in vue. Basically you create a child component that switches between <p>and <input> tags, depending on props. You have to use <component> element for this, because it's an inherent vue component to manage dynamic components.
child:
<template>
<input v-if="input" type="text" value="hello world">
<p v-else>hello world</p>
</template>
<script setup>
const props = defineProps({
input: Boolean
})
//emit input when form is submitted...
</script>
parent:
<template>
<component :is="p" :input="true"/>
</template>
<script setup>
import p from './p.vue'
</script>
Vue is awesome <3.
Original Question:
Is it possible to input text into <p> tags, so that it will be stored in a database? I want to build a "live" CMS, similar to wordpress/webflow and using formatted <input> fields instead of <p>/<h> elements would make the html messy because, basically you would have to create two identical sites, one with normal text tags and the editable one with input fields, that look like normal text tags.
I was wondering if there is a way to manipulate reactive objects like ref to make it possible?
Alternatively you could create a site completely without normal text tags and instead use input field placeholders but that might mess up SEO.

Like in the comment above using :is could work when switching between the states.
<component :is="tag">
tag value could be dynamic and depending on the tag value the component would change its state.
I would suggest using div with v-html that supports any markup when in live mode and when user is in editing mode display a rich text field. For rich text editing i would suggest to look at https://tiptap.dev/
you can bind the input value and the tiptap would create any html tags you need <p/>, <li/>, <h1/>

Can't clear input within Vaadin-grid?

I have used a method in the past to make paper-inputs blank in the past, however my usual methods are not working when in conjunction with Vaadin-grid.
Am I missing something here?
Vaadin-grid HTML
<vaadin-grid-column>
<template class="header">
<div class="horizontal layout cell">
<label for="keyFilter" class="keyText cell flex">Key</label>
<vaadin-grid-filter class="cell" id="keyFilter" path="key" value="[[_filterKey]]">
<paper-input no-float-label class="keyFilter" id="keyFilter" slot="filter" placeholder="Filter search" value="{{_filterKey::input}}" focus-target on-input="clearAppear" >
<iron-icon suffix icon="clear" class="clearIcon" on-click="clearField" clear-item-id="keyFilter"></iron-icon>
</paper-input>
</vaadin-grid-filter>
</div>
</template>
<template class="cell">[[item.key]]</template>
</vaadin-grid-column>
I have attempted the following JS:
// Attempt 1 - gives "undefined" within the dev tools
this.$.keyFilter.value = '';
// Attempt 2 - finds the correct element, but does not set the value to blank
document.getElementById('keyFilter').value = ''

For locating dynamically-created nodes in your element's shadow DOM, use the standard DOM querySelector method:
this.shadowRoot.querySelector(selector)
So, for your problem use this.shadowRoot.querySelector("#keyFilter").value='';
And you have done a simple mistake in the above code i.e. providing same id name for vaadin-grid-filter and paper-input element. Make sure to change this before trying the above code.

Polymer 1.0+, can't define template in light dom for use by component

In Polymer 1.0+, how do you pass in a template from the light dom to be used in the dom-module? I'd like the template in the light dom to have bind variables, then the custom element use that template to display its data.
Here is an example of how it would be used by the component user:
<weather-forecast days="5" as="day">
<template id="forecast-template">
<img src="{{day.weatherpic}}">
<div>{{day.dayofweek}}</div>
<div>{{day.wordy}}</div>
<div>{{day.highlowtemp}}</div>
</template>
</weather-forecast>
This weather-forecast component would contain an iron-list in the dom-module and ideally, the component would reference the "forecast-template" inside the iron-list that would bind the variables to the element. Ultimately, it would generate a 5-day forecast using that template. My issue is that I haven't seen an example of bind-passing variable based templates into a Polymer 1.0 custom element. I would think this or something similar would be fairly commonplace.
The following is an example of how I would like to see it work on the client side, but no luck yet. Although the template is successfully references, it only displays once, while other fields actually do show in the loop.
<dom-module id="weather-forecast">
<template is="dom-bind">
<iron-list items="[[days]]" as="day">
<content selector='#forecast-template'"></content>
</iron-list>
</template>
</dom-module>
Any input is appreciated. Thanks!

You cannot use dom-bind inside another polymer element.
Your first element should just be dom-bind
<template is="dom-bind">
<iron-list items="[[days]]" as="day">
<weather-forecast day=[[day]]></weather-forecast>
</iron-list>
</template>
Your second element should be weather-forecast
<dom-module id="weather-forecast">
<template>
<style></style>
<img src="{{day.weatherpic}}">
<div>{{day.dayofweek}}</div>
<div>{{day.wordy}}</div>
<div>{{day.highlowtemp}}</div>
</template>
<script>
Polymer({
is: "weather-forecast",
properties: {
day: {
type: Object
}
}
});
</script>
</dom-module>
If this does not work, try wrapping the weather-forecast tag inside a template tag inside iron-list.

You can use the Templatizer. You can look at my blog for some example (there's also a Plunker link).
Unfortunately there seems to be some bug or limitation, which breaks two way binding:
Add a "dynamic" element with data-binding to my polymer-element
Polymer: Updating Templatized template when parent changes
Two way data binding with Polymer.Templatizer

Polymer.js databindings inside nested components

I have a polymer element which is my parent element for my entire app. It performs ajax calls routinely and sets values according to the AJAX calls.
Within the polymer element I have a child element that needs to display one of these values dynamically.
Here is the child code:
<polymer-element name="main-status" attributes="auto">
<template>
<div id="status" flex>
<div id="info" middle>
<p>Robot is in {{ auto ? "AUTO" : "MANUAL T1" }} mode.</p>
</div>
</div>
<link rel="stylesheet" type="text/css" href="main-status.css">
</template>
<script src="main-status.js"></script>
</polymer-element>
It is used in the parent as such:
<main-status auto="{{statusAuto}}"></main-status>
And {{statusAuto}} is confirmed to change (between true and false). This change does not get reflected in the child element. I have similarly tried binding to global variables using the monostate pattern suggested on polymer's website, and I still have no success.
How can this be achieved?

<main-status auto="{{statusAuto}}></main-status>
misses the closing quote - should be
<main-status auto="{{statusAuto}}"></main-status>
If that is only in the question not in your actual code try
<main-status auto="{{statusAuto}}">{{statusAuto}}</main-status>
and verify that statusAuto updates the value properly.

Angular not parse the template {{value}} in style attribute in IE9 and 10

I display a list of bars in a NgRepeat and I use the value frecuency to display the width of bars in percentage. From what i see IE 9-10 doesn't like this part: style="width:{{type.frecuency}}%;"
<div class="drp" ng-repeat="type in weeks">
<div style="width:{{type.frecuency}}%;" class="percentBar">
<span ng-if="type.frecuency > 14">{{type.frecuency}}%</span>
</div>
</div>
Is this an issue with Angular on IE or my code is the problem.
Thanks
P.S.
I know that i could make a class but modifying the style attribute is faster.
Solution: ng-style="setBarWidth(type.frecuency);"
scope.setBarWidth = function(width) {
return {width: width+'%'};
};

When using derived values for various HTML attributes, it's always a good idea to use the provided Angular directives to do it. They make sure that the browser sees the values you want it to see and not the binding syntax (in your case {{type.frecuency}})
Here, the ngStyle directive should be used.
<div class="drp" ng-repeat="type in weeks">
<div ng-style="width:{{type.frecuency}}%;" class="percentBar">
<span ng-if="type.frecuency > 14">{{type.frecuency}}%</span>
</div>
</div>
There are similar directives for many other HTML attributes, see the documentation for the full list.